Tuto : offrez une police personnalisée à vos titres
3 fév
Je reçois régulièrement des questions sur la manière dont j’ai procédé pour donner une police personnalisée à mes titres d’articles. J’ai donc décidé de vous poster une petit tuto très simple, inspiré de ce billet.
Comment faire ?
Il suffit d’installer le script nommé « cufon » sur votre blog Wordpress. Pour cela, voici la procédure à suivre :
- Récupérer le script à cette adresse et le copier coller dans un fichier que vous nommerez : cufon-yui.js (à l’aide d’un éditeur de texte type Notepad++/Smultron ou Bloc Notes)
- Maintenant, à cette adresse, vous allez uploader la police que vous désirez utiliser pour vos titres afin que le site la transforme dans le format approprié (Attention : ça ne fonctionnera pas si vous prenez directement la police dans le répertoire « FONTS » de Windows, il faudra la copier ailleurs pour ça). Vous cochez les cases qu’il faut. Faites aussi attention aux polices qui ne gèrent pas les accents et autres apostrophes. Regarder avant, dans le fichier de votre police si celle-ci les gère bien
Vous pourrez ensuite télécharger le fichier sur votre ordinateur. - Vous pouvez maintenant uploader cufon.js ainsi que le fichier de votre police sur votre serveur ftp. Pour cela, vous allez créer un dossier js à la racine de votre thème (s’il n’est pas déjà créé) et vous allez y mettre ces deux fichiers.
- Maintenant, vous devez ouvrir le fichier header.php de votre thème et ajouter les lignes de code suivantes dans la balise <head> du fichier :
- Vous pouvez choisir de changer juste les titres h1 ou bien, les h2 également et ainsi de suite. Pour la police, il suffit donc de mettre l’url du fichier à l’emplacement montré sur le screenshot (vous pouvez cliquer pour l’agrandir).
5 6 7 8 9 | <script src="<?php bloginfo('template_url'); ?>/js/cufon.js" type="text/javascript"></script> <script src="<?php bloginfo('template_url'); ?>/js/GeosansLight_500.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h3'); </script> |
Voilà, maintenant vous devriez avoir de jolis titres que tout le monde verra 
La Geekette
Sarah, étudiante belge de 24 ans qui poursuit actuellement ses études à Lille. Je suis passionnée par le web, les nouvelles technologies, les jeux vidéo, la photographie et bien d'autres choses encore !
Vous découvrirez tout ça en parcourant les pages de mon blog =)
Bonne visite !
Merci sarah pour l’info
maintenant je comprend pourquoi certains blogs ont des titres jolis
et parfois EXTRA ORDINAIRES lol ,
tu as résolus un grand énigme
pour moi
merci de nouveau
Anouar
C’est marrant je me suis posé la question juste hier et tu y réponds
J’ai regardé un peu en détails le code car j’ai eu un peu peur des répercussions de la transformation des titres en images sur le référencement. Mais non le code conserve les balises titres donc c’est tout bon
A votre service
Sympa le tuto
Répondre
Je préfère les titres dans un typo « normal », mais ça peut être bien de mettre un peu de folie sur son blog.
Edmee´s last blog ..Mon sac violet!
Cool justement je cherchais un tuto =) Merci!
Snif ca marche pas je comprends pas pourquoi….
Aaaah moi qui osait pas te demander comment faire ! Merciiii ! Je vais essayer de tester !
Répondre
Farfadette´s last blog ..Petites Cocottes
Et voila, maintenant mon blog il est tout beau
Répondre
Le tuto est super bien fait j’avais essayé de le faire à partir de l’explication sur le site mais ca ne marchait pas, apparemment je n’avais pas mit le script au bon endroit :s
En tout cas là c’est très clair, merci!
Eowine´s last blog ..Wayne`s World
@Edmee: Du moment que la police utilisée n’est pas trop extravagante ^^
@Eskay: De rien !
@TiChou: Tu peux m’en dire plus ?
@Farfadette: Si tu as d’autres questions n’hésite pas !
@Eowine: De rien et merci, ça fait plaisir
Ben j’ai tout fait comme c’est dit mais la police ne change pas. J’utilise la police « orial » pour changer le titre principal de mon blog.
merci a toi pour ce superbe Tuto qui est très agréable a lire. je vais aller le tester sur un de mes blogs pour voir
bonne continuation
Répondre
RenardBlanc´s last blog ..Langouste grillée