Francis Chouquet Graphiste Lettering

Utiliser Cufon sur votre blog WordPress !

0

Probablement que la plupart d’entre vous se demande ce que peux bien être Cufon, non ? En fait, tout comme sIFR, c’est une alternative qui va vous permettre d’utiliser d’autres polices que celles utilisées par défaut, et qui sont peu nombreuses. sIFR est une alternative qui crée une image en Flash des différents éléments que l’on veut. Elle est souvent utilisée pour les titres des blogs ou encore des articles. sIFR permet donc d’afficher les polices que l’on veut sur son site web.

L’objectif de Cufon est le même ! Grâce à un script, vous allez pouvoir afficher la police que vous voulez sur votre site. sIFR n’est pas trop utilisé aujourd’hui sur le web parce qu’il est lourd à gérer et ne permet pas toujours d’arriver au résultat attendu. Même des personnes qui en connaissent bien le fonctionnement n’arrive pas toujours non plus à en faire ce qu’ils veulent. Qui plus est, le fait que ce soit en Flash pose d’autre soucis.

Ici, non seulement l’installation est simple mais en plus la customisation l’est également. C’est vraiment un jeu d’enfant que d’utiliser Cufon ! Principal reproche que j’y ferais est l’impossibilité de sélectionner le texte. Ca peut être génant dans certains cas, comme si vous souhaitez l’utiliser pour du texte. Mais si ce n’est que pour des titres, ça peut être très utile.

Installation de Cufon

Tout d’abord, vous allez devoir récupérer le script Cufon. Pour cela, allez sur ce site, et téléchargez le script en faisant un clic droit sur l’onglet « Download ».

Ensuite, vous allez devoir générer la police que vous souhaitez utiliser en Javascript. Pour cela, toujours sur le même site, vous allez uploader votre police, valider le fait que vous avez les droits pour utiliser la police ( The EULAs of these fonts allow Web Embedding ) et enfin accepter les termes de l’utilisation du générateur de police ( I acknowledge and accept these terms ). Vous avez également la possibilité d’utiliser différentes options, mais pour une utilisation simple, vous n’aurez pas besoin d’autre chose.

Une fois, que vous avez coché les bonnes cases aux bons endroits, cliquez sur « let’s do it ». Vous allez générer votre police en javascript. Elle sera téléchargée sur votre ordinateur.

Vous allez ensuite uploader Cufon et la police sur le serveur FTP de votre blog. Pour cela vous allez créer un dossier « js » à la racine de votre thème.

Créer un dossier "js" à la racine de votre thème

Ensuite, vous allez ouvrir votre fichier « header.php » et y saisir les informations qui permettront d’utiliser le script et la police sur votre blog. Ces informations sont les suivantes:

1 2 3 4 5 
<script src="<?php bloginfo('template_url'); ?>/js/cufon-yui.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>

Collez ces informations dans l’entête de votre site, donc dans la balise « head ». Ici, on donne l’URL du script ainsi que celle de la police. Et ensuite, nous souhaitons remplacer la police actuelle sur les titres « h3 » par la police téléchargée ici. D’où la dernière ligne « Cufon.replace ».

Voilà ! C’est tout ce qu’il y a à faire ! Si vous avez déjà tenté d’utiliser sIFR, ça doit vous paraître incroyablement simple !! Une fois le script installé, il ne vous reste plus qu’à utiliser le style prévu pour la balise h3, dans votre feuille de style.

Quelques soucis avec Internet Explorer ?

Comme d’habitude, Internet Explorer vient semer la zizanie !! Dans certains cas, il y aura un temps assez long pour générer le texte. Pour remédier à tout ça, vous n’avez qu’à insérer la ligne de code suivante juste avant la fermeture de la balise « body », dans le fichier index.php:

1 
<script type="text/javascript"> Cufon.now(); </script>
Insertion du script juste avant la fermeture de la balise "body"

Utiliser plusieurs polices sur le même blog

Pour utiliser plusieurs polices, il suffit de faire la même démarche que précédemment, en uploadant les polices générées, et en utilisant les « Cufon.replace » en leur associant les polices voulues. L’exemple utilisé sur le site de Cufon donne ceci:

1 2 3 4 5 6 7 
<script src="<?php bloginfo('template_url'); ?>/js/cufon-yui.js" type="text/javascript"></script> <script src=""<?php bloginfo('template_url'); ?>/jsFrutiger_LT_Std_400.font.js" type="text/javascript"></script> <script src="<?php bloginfo('template_url'); ?>/js/Myriad_Pro_400.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' }); Cufon.replace('h2', { fontFamily: 'Myriad Pro' }); </script>

Pas très compliqué, non ?

Si votre anglais vous le permet, je vous conseille fortement ce screencast de Nettuts.com:

En tout cas, selon moi, Cufon peut être une sérieuse alternative pour utiliser d’autre polices sur le web. Quoi qu’il en soit, cette solution a ses limites et tout comme pour les autres solutions que sont sIFR ou encore @font-face, n’oubliez de vérifier à l’avance que vous avez les droits pour utiliser la police que vous voulez ! 😉 On se sait jamais !! 😀

Si vous avez des questions, n’hésitez surtout pas à laisser un commentaire !

37 Commentaires

  • Il est préférable d’utiliser la fonction suivante pour embarquer du Javascript dans un thème WP :

    plutôt que :
    <script src= »/js/cufon-yui.js » type= »text/javascript »>

    Très bon article sinon !

  • les balises PHP ne sont pas passées dans mon précédent commentaire :

    wp_enqueue_script(‘cufon’, get_bloginfo(‘template_url’).’/js/cufon-yui.js’, null, ‘1.0’);

    plutôt que :
    <script src=”bloginfo(‘template_url’);/js/cufon-yui.js” type=”text/javascript”>

  • Merci pour la remarque ! 😉

  • Bon article!
    En plus cufon marche nickel (bcp plus simple que sIFR pour moi) 🙂

    En fouinant que wordpress.org hier, j’ai trouvé un plugin en dev qui gère cufon (http://wordpress.org/extend/plugins/wp-cufon/) à tester…

  • Super article Francis, comme d’hab’ j’ai envie de dire.

    Je ne connaissais pas Cufon, mais je pense qu’il va me servir. J’utilisais Flir (jusqu’à maintenant lol) à droite à gauche quand c’était nécessaire, mais je crois que tu viens de proposer une bonne alternative !

  • salut,
    j’ai du louper une étape : quel est l’intérêt par rapport à l’excellent plugin wordpress Ttf titles ? Celui-ci en effet est beaucoup plus simple à utiliser puisqu’on upload directement les fichiers ttf par le biais de l’interface wp. J’en ai parlé ici : Personnalisez les polices de votre blog sous wordpress : ttf titles

    à bientôt

  • Ok, c’est effectivement une bonne solution, mais pour le referencement comment ca se passe ?
    Il est pas préférable d’avoir un h1 h2 ou h3 plutôt qu’une balise image ?
    Enfin j’ai peut-être loupé un truc, peut-être que c’est cumulable avec ce genre de balises ?

  • LOmiG > Il utilise quoi comme technique ton plugin ? Parce qu’il y a forcément du sIFR, du Cufon ou du FLIR derrière, à moins que ce soit du @font-face ? A moins que ce soit une autre technique, ça fonctionne comment ? Je veux dire le concept ?

    netslider57 > Aucune incidence sur le référencement puisque le html ne bouge pas, tu gardes tes titres et leur contenu tel quel !!

  • Je confirme, Cufón est vraiment bien, j’ai complètement laissé tomber sIFR.
    Voilà une technique pour combiner Cufón et @font-face :
    http://kilianvalkhof.com/2009/.....font-face/
    Ainsi @font-face sera utilisé pour Firefox 3.5 et Safari. Et Cufón pour les autres.
    Pour le texte selectionnable, c’est dans leur todo list.

  • Ced > Ouais, j’ai découvert le truc il y a peu mais pas encore eu le temps de l’essayer… mais là, je crois que je vais tester d’ici la fin de semaine !! ^^

  • Ag

    Merci Francis, ça fonctionne parfaitement bien.
    J’avais laissé tombé cette option avec sFIR, je peux dorénavant remettre en forme mes titres 😉

  • Merci pour cette alternative à siFR

    J’ai toujours été tenté par ce type de titre, mais je me demande d’un point de vu ref nat si on perd pas un peu ? Et sur l’utisabilité c’est dommage qu’on ne puisse pas sélectionner les titres (je le fais souvent pour rechercher d’autres infos au sujet d’un billet !)

  • Antonin > Je l’ai déjà dit plus haut, mais Cufon n’a aucune incidence sur le référencement. Le code HTML reste identique. Pour ce qui est de la sélection du texte, il paraît que les auteurs sont en train de travailler dessus ! 😉

  • « Missing features:
    – Text selection: until we find a solution that works in Opera, this feature will not be added. We have solutions for other browsers. »

  • Bonjour,

    je trouve que la méthode est un peu compliqué, il existe un plugin que j’utilise depuis longtemps et qui marche nickel… sans avoir à faire aucune manipulation.
    Il permet la sélection du texte, garde le texte pour le référencement, et peut être désactivé pour ie6.

    On peut choisir sur quelle balise il intervient… bref du bonheur !

    http://wordpress.org/extend/pl.....placement/

  • Je réponds pour LOmiG. TTFTiltles utilise une librairie PHP qui génère, côté serveur, une image à partir de polices TTF préalablement placées sur le serveur, des images.
    L’extension embarque un système de cache interne qui évite de calculer plusieurs fois la même image pour un texte donnée.

    L’inconvénient est que son utilisation n’est pas toujours possible simplement parce que son fonctionnement nécessite la possibilité de placer des « hook » au bon moment. Ça marche pour les titres des billets, par exemple, mais moins facilement pour des titres de widgets (la bidouille est toujours possible, hein).

  • @Francis Merci pour la précision concernant le ref je n’avais pas vu que tu en avais déjà parlé !

  • Alex

    Bonjour,

    Tout d’abord merci pour ce tuto simple, rapide et efficace a mettre en place sur wordpress ou même un site.

    Par contre, je rencontre un petit souci avec (surprise) Internet Explorer en effet se C…. ne veut pas afficher la police demande alors que Firefox. Je précise que j’ai utilisé cufon sur un site que j’ai créer de A à Z.

    En sachant, que je n’ai qu’une seul police personnalisé et que j’ai suivi a la lettre l’article.

    Je peux vous fournir par mail le code utilisé.

    Merci d’avance de votre aide

  • Alex, tu as mis la petite ligne qu’il faut pour IE ?

  • Alex

    Cufon.now();

    Oui tout à fait. le pire est que je l’ai tester chez moi sur IE6 et FF aucun problème là je suis au boulot sur FF 3 et IE7 et la s’est le drame 🙂

  • Peut-être une histoire de cache, non ? Tu as l’URL pour que je regarde ?

  • Alex

    oki la voici http://www.reve-leen.fr laisse moi 5-10 minutes que j’upload les fichiers

  • Bonsoir!
    Merci pour cet article! facile à installer et ca a l’air de fonctionner! je dis « ca a l’air » car j’ai crée mon site sous mac et la police que j’utilise est une police mac mais le test est deja concluant sous ipod et iphone qui ne prenait pas en charge avant la police « handwriting-dakota ».
    Il me reste cependant une question, j’ai voulu inserer la ligne de code pour palier le probleme d’IE mais dans mon fichier index.php je n’ai pas de balise html et body, c’est normal?
    j’ai mis la ligne de code en derniere ligne du fichier mais je doute que ca marche.
    une idée?
    je devrais pouvoir faire le test IE demain chez un ami mais en attendant, si tu as une solution pour bien inserer cette ligne de code…
    merci encore pour ce tuto!
    a bientot
    marjorie

  • Marjorie > Peut-être que la balise html est dans le footer.php, regarde de ce côté-là ! 😉

  • Merci encore pour ce tuto de cufon qui fonctionne à merveille et sur tout les navigateurs que j’ai pu tester.
    j’ai quand meme une question, est-ce normal que depuis que j’ai installé cufon, les liens au survol de la souris ne change plus d’apparence. avant la couleur de la police changeait mais depuis plus rien alors que je n’ai rien touché au css. j’ai vu que le texte avec cufon n’était selectionnable, mais je voulais savoir si cela touchait aussi les liens?
    merci de ta réponse
    a bientot
    Marjorie

  • Bonjour,

    J’utilise TTFTITLES.

    Quelqu’un sait comment avoir une image à la place de ses H1 (ca c’est fait) mais en ne perdant pas le texte pour référencement ?

  • 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

  • anna

    Bonjour !

    et mille mercis pour ce super tuto ! Depuis le temps que je cherchais une alternative aux polices supportées….
    Je viens de faire une page test, qui fonctionne, et je vois qu’effectivement comme le disent de nombreux forums, le texte transformé par cufon n’est pas sélectionnable.
    Y-a-t-il une solution pour y remédier ?
    En effet, je vois que sur ce blog, les titres sont sélectionnables, et je n’arrive pas à en trouver la raison :
    http://www.monblogdefille.com/blog/

    D’avance merci !

  • octo49

    Bonjour, avec un gros décalage, mais j’utilise Cufon en h1 uniquement et impossible de faire apparaitre les accents sur minuscule ou majuscule…en ayant essayé diverses typos, par contre sans accent, pas de problème ça fonctionne.
    Merci d’avance si aide proposée
    Franck

  • dimitri

    Hello!

    Problème d’accent aussi. JE continue de chercher…

  • Bonjour,

    Pour vos accents il y a deux choses à faire :

    1. Vérifier que votre police choisie contient les caractères avec accents.
    2. Cocher la case « Latin-1 Supplement » dans le générateur Cufon.

    Bonne chance.

  • john

    sauf que apprendre le css luciole pour resoudre un pobleme qui n’en a pas besoin c’est un peu exagéré.
    Le probleme des caracteres accentués vient que les titres de ce theme sont affichés en museo via un fichier cufon.
    et c’est ce fichier cufon qui a été encodé sans les caracteres accentués.
    Ce fichier se trouve dans le theme : Boldy/js/Museo_Slab_500_400.font.js
    et pour ceux que ca interresse j’ai corrigé ce probleme :
    le fichier avec les caracteres accentués se trouve ici : http://www.pediatrieenchantee.com/wp-co … eo.font.js

  • Bonjour,

    je voudrais mettre des accents sur mes typo, les code ascii html marche pas .

    donc je recherche les ligne de commande a poser ds le css pour valider ces accents.

    /* ——————- Typography ——————- */

    a {text-decoration: none; color: #5A7E18;}
    p{ display: block; color: #404040; line-height: 1.5; font-size: 11px; margin-bottom: 5px;}
    h1, h2, h3, h4{display: block; padding: 0;color: #292929;font-size: 32px; font-weight: normal; margin-bottom: 20px;}
    h1 span, h2 span, h3 span, h4 span{ display: inline-block; color:#5A7E18;}
    h1 span.h1big{ font-size: 60px;}
    h1 span.h1big span{ font-size: 30px; vertical-align: top;}
    h2{font-size: 28px;}
    h3{ font-size: 24px;}
    h4{font-size: 20px;}

    table{
    width: 100%;
    border-spacing: 0;
    padding: 0;
    }

    table td{ text-align: left; padding: 3px; vertical-align: middle;}
    table td.center{ text-align: center !important; padding: 3px;}

    /* ——————- Typography End ——————- */

  • Je tiens à souligner que sIFR avait l’inconvénient d’être une technologie en flash, donc qui ne fonctionne pas sur smartphone, tablette and co.

Success, your comment is awaiting moderation.