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).
Voilà , maintenant vous devriez avoir de jolis titres que tout le monde verra
La Geekette




anouar
3 février 2010 à 13 h 00 minMerci 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
Shloka
3 février 2010 à 13 h 57 minC’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
La Geekette
3 février 2010 à 14 h 52 minA votre service
Edmee
3 février 2010 à 15 h 10 minSympa 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! =-.
Eskay
3 février 2010 à 21 h 53 minCool justement je cherchais un tuto =) Merci!
TiChou
4 février 2010 à 16 h 56 minSnif ca marche pas je comprends pas pourquoi….
Farfadette
5 février 2010 à 11 h 13 minAaaah moi qui osait pas te demander comment faire ! Merciiii ! Je vais essayer de tester !
.-= Farfadette´s last blog ..Petites Cocottes =-.
Eowine
5 février 2010 à 11 h 14 minEt 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 =-.
La Geekette
5 février 2010 à 11 h 29 min@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
TiChou
5 février 2010 à 18 h 55 minBen 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.
RenardBlanc
11 mars 2010 à 13 h 46 minmerci 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 =-.
pitch
21 avril 2010 à 21 h 29 mingrrr, 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…
Pitch
26 avril 2010 à 20 h 01 minc’est bon j’ai trouvé la solutions, merci de ce chouette tutoriel
Mealin
14 juin 2010 à 12 h 31 minVivement 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.
Bon plan
14 juillet 2010 à 9 h 25 minTuto très bien fait. J’ai une petite question, est-ce que les moteurs de recherche tiennent compte du titre après cette modification ?
Sean
7 juin 2011 à 18 h 32 minil faudra la copier ailleurs pour ça). Vous cochez les cases qu’il faut.