Tuto : offrez une police personnalisée à vos titres
03. fév, 2010 
16 commentaires
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
A propos de l'auteur
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
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 !
Farfadette´s last blog ..Petites Cocottes
Et voila, maintenant mon blog il est tout beau
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
RenardBlanc´s last blog ..Langouste grillée
grrr, pourquoi ça fonctionne pas chez moi
j’utilise windows live writer pour mon blog
mais rien à faire quand j’écris le titre du blog c’est tout griser je peut rien choisir
j’ai éssayé dans wordpress même là ça veut pas le faire, pourtant j’ai tout bien fait comme ta dit, sniff
je ne connais pas d’autre éditeur de blog…
c’est bon j’ai trouvé la solutions, merci de ce chouette tutoriel
Vivement que tous les navigateurs gèrent les font via CSS3 … ça fera toujours des .js en moins à charger et des manips plus simples !
Enfin, j’ai choisi d’oublié IE personnellement du coup et de lui attribuer une police « normale », ça ne vaut pas le coup de ralentir le chargement des autres je trouve.
Tuto très bien fait. J’ai une petite question, est-ce que les moteurs de recherche tiennent compte du titre après cette modification ?
Bon plan´s last blog ..Lave glace pas cher