La Geekette

Tuto : offrez une police personnalisée à vos titres

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 :

  1. 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)
  2. 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 :wink:
    Vous pourrez ensuite télécharger le fichier sur votre ordinateur.
  3. 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.
  4. 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  :
  5. 
      
      

    cufon

  6. 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 :smile:

La Geekette





Rendez-vous sur Hellocoton !

17 commentaires sur Tuto : offrez une police personnalisée à vos titres

  1. anouar
    3 février 2010 à 13 h 00 min

    Merci sarah pour l’info :)

    maintenant je comprend pourquoi certains blogs ont des titres jolis :love: et parfois EXTRA ORDINAIRES lol ,

    tu as résolus un grand énigme :razz: pour moi

    merci de nouveau

    Anouar

    Répondre
  2. Shloka
    3 février 2010 à 13 h 57 min

    C’est marrant je me suis posé la question juste hier et tu y réponds :D
    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 ;)

    Répondre
  3. Edmee
    3 février 2010 à 15 h 10 min

    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! =-.

    Répondre
  4. Eskay
    3 février 2010 à 21 h 53 min

    Cool justement je cherchais un tuto =) Merci!

    Répondre
  5. TiChou
    4 février 2010 à 16 h 56 min

    Snif ca marche pas je comprends pas pourquoi….

    Répondre
  6. Farfadette
    5 février 2010 à 11 h 13 min

    Aaaah moi qui osait pas te demander comment faire ! Merciiii ! Je vais essayer de tester !
    .-= Farfadette´s last blog ..Petites Cocottes =-.

    Répondre
  7. Eowine
    5 février 2010 à 11 h 14 min

    Et voila, maintenant mon blog il est tout beau :D
    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 =-.

    Répondre
  8. 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 :oops:

    Répondre
    • TiChou
      5 février 2010 à 18 h 55 min

      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.

      Répondre
    • RenardBlanc
      11 mars 2010 à 13 h 46 min

      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 =-.

      Répondre
  9. pitch
    21 avril 2010 à 21 h 29 min

    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… :!:

    Répondre
  10. Pitch
    26 avril 2010 à 20 h 01 min

    c’est bon j’ai trouvé la solutions, merci de ce chouette tutoriel

    Répondre
  11. Mealin
    14 juin 2010 à 12 h 31 min

    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. :evil:

    Répondre
  12. Bon plan
    14 juillet 2010 à 9 h 25 min

    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 ?

    Répondre
  13. Sean
    7 juin 2011 à 18 h 32 min

    il faudra la copier ailleurs pour ça). Vous cochez les cases qu’il faut.

    Répondre

1 Pingbacks & Trackbacks on Tuto : offrez une police personnalisée à vos titres

Laissez un petit mot...

Les liens des commentaires peuvent être libérés des nofollow.

:mrgreen: :twisted: :evil: :oops: :roll: :cry: :lol: :love: :kiss: :pirate: :vangry: :down: :cool: :shock: :sad: :smile: :???: :grin: :razz: :eek: :mad: :neutral: :wink: :!: :?: