Comment utiliser une Google Web Font avec WordPress ?

Capture d'écran présentant le logo et un extrait du site Google Web Fonts

Capture d’écran présentant le logo et un extrait du site Google Web Fonts

Ce blog se met en place doucement et la nouveauté du jour est la modification de la police de caractères : Responsive Mind se pare désormais de la police sous Open Font License (OFL) “Nunito” gracieusement fournie par Google dans le cadre du projet Web Fonts. J’en profite donc pour partager mon expérience avec ce petit tutoriel qui vous guidera dans la mise en place d’une police personnalisée

La mise en place d’une telle police est d’une simplicité à toute épreuve et s’effectue en 3 étapes qui vous prendront moins de 15 minutes :

  • Sélection de la police désirée
  • Appel de la police dans les headers de votre site ou blog
  • Application de la police dans votre feuille de style

Sélection de la police désirée

En vous connectant à http://www.google.com/webfonts vous avez accès à une collection très riche de polices de caractères utilisables gratuitement sur votre site (mais aussi téléchargeable pour que vous puissiez vous en servir dans un éditeur de texte). Comme vous pouvez le voir sur la capture en haut de ce billet, 616 fonts sont disponibles à ce jour.

Une fois votre choix fait, sélectionnez toutes les polices voulues en cliquant sur le bouton “Add to collection” correspondant à chacune d’entre elles si vous voulez en utiliser plusieurs ou sur le lien “Quick-use” d’une police pour n’en utiliser qu’une.

Les actions possibles sur la web font Nunito

Les actions possibles sur la web font Nunito

Attention : chaque police utilisée augmente le temps de chargement de vos pages, il est préférable de n’en utiliser qu’une pour tout votre site (et puis un peu de cohérence graphique ne peut pas nuire).

En cliquant sur “Quick-use” vous obtiendrez 2 lignes de code : une à ajouter dans votre code HTML, l’autre à ajouter dans votre css.

Mise en place de la police dans les headers de vos pages

Google fournit une ligne de code à insérer dans les headers de vos pages

Google fournit une ligne de code à insérer dans les headers de vos pages

Pour intégrer la police à votre site, il faut simplement copier la ligne de code fournie et la coller entre les balises <head> et </head> de vos pages, que vous utilisiez WordPress ou pas. Idéalement, il faut insérer cette ligne après la balise <title></title> dont la position a une importance dans le référencement de vos pages.

Utilisateurs de WordPress, vous devez éditer le fichier En-tête (headers.php) de votre thème, soit avec un outil de développement, soit simplement dans le backoffice de WordPress, section Apparence → Editeur.

Mise en place de la police dans votre feuille de style css

Il suffit d'indiquer le nom de la police dans votre feuille de style

Il suffit d’indiquer le nom de la police dans votre feuille de style

Une fois la police “appelée” par vos pages, il faut indiquer au navigateur qu’il doit l’utiliser. Pour cela il suffit d’ajouter à votre feuille de style le nom de la font dont vous voulez vous servir. La plupart du temps le fait de paramétrer l’élément html est suffisant pour que la police soit appliquée à tous les éléments, par exemple de la façon suivante :

html { font-family: 'Nunito', Tahoma; }

Avec WordPress, il faut maintenant éditer la feuille de style (style.css) de votre thème, de la même façon que précédemment, pour mettre en place le code ci-dessus.

D’autres services fournissant des web fonts

Google n’est pas le seul acteur à fournir des polices utilisables sur vos sites internet. Il y a par exemple l’excellent FontSquirrel qui propose de la même façon plus de 800 polices à télécharger et intégrer gratuitement, même pour un usage commercial, mais qui offre surtout la possibilité de transformer vos propres fichiers ttf en web font, grâce à un outil appelé @font-face Generator.

L’intégration est à peine plus complexe que pour les google fonts mais comme les fichiers sont hébergés par vous, il n’y a plus aucun risque de voir disparaître le service du jour au lendemain.

Et vous ? Connaissez-vous d’autres collections de web fonts ? Utilisez-vous un générateur de web fonts ou le service de Google ?

 


Sources :

Google Web Fonts: http://www.google.com/webfonts
Font Squirrel: http://www.fontsquirrel.com/

7 réponses

  1. gpner dit :

    C’est pas possible d’héberger des polices google sur son serveur ?

  2. Renaud M.G. dit :

    Bonjour, personnellement j’utilise les web fonts de google “en ligne” mais j’ai téléchargé les fichiers ttf que j’ai convertis avec FontSquirrel au cas où… comme ça je pourrai les héberger moi-même

  3. […] alors il faut s’assurer que le texte qu’on lui propose est lisible : choisissez une police de caractères claire (évitez généralement les fonts manuscrites) et assurez vous que le contraste entre le […]

  4. Gérard dit :

    Les google font permettent des effets type shadow, neon, embossed, etc.
    Comment appeler ces effets dans la feuille css ?

  5. Renaud M.G. dit :

    Bonjour, tu remarqueras que les différentes variantes de la police sont accompagnées d’un numéro : normal 400, thin 100… pour utiliser ces variantes, spécifie ce numéro comme valeur de la propriété font-weight en css.
    Voilà l’exemple fourni par google : h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

  6. Jerome dit :

    Merci beaucoup
    je debute sur WP et je viens de reussir a installer ma premiere Font grace a votre tuto tres simple et clair
    MERCI beaucoup
    Cdt

  7. Renaud M.G. dit :

    @Jerome il n’y a pas de quoi, ce blog est là pour ça !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *