Utilisez les polices Google sur votre blog WordPress – Google Fonts Web

polices habituellement utilisées sur le WebGoogle Fonts Web permet d’utiliser des polices différentes et moins restrictives que : Verdana, Arial, Georgia et la non moindre Comic. Les polices Google peuvent être utilisées gratuitement alors pourquoi s’en priver.

Il y a deux façons d’installer et utiliser les polices Google sur votre blog WordPress. Personnellement je préfère le faire manuellement.

  1. Manuellement en copiant le code indiqué par Google
  2. Vous pouvez aussi installer ce plugin – WP Google Fonts 

 

Voici une marche à suivre pour installer les polices Google – Google fonts Web manuellement

Choisir votre police sur le site de Google Fonts Web

Google fonts Web Bouton Quick useGoogle fonts - sélection par NomMoi j’aime bien choisir en mettant le nom des polices en sélectionnant FONT NAME dans la boîte « Preview text ».

Lorsque j’ai fait mon choix de police, je clique sur Quick use pour obtenir les codes à insérer sur mon blog WordPress. Dans mon exemple j’ai choisi la police Raleway ultra-light 100.

Information sur la police « Google Fonts Web » qu’on a choisie

Google Fonts impact du temps de chargement de la pageOn peut avoir une idée temps de chargement de la page lorsqu’on utilise cette police. Dans le cas de Raleway, il n’y a pas un impact majeur sur le temps de chargement. Je vous conseille de ne pas mettre plus que 2 polices diffiérentes afin de ne pas nuire en temps de chargement de la page. De toute façon la modération à toujours meilleur goût, trop de polices différentes ne seraient pas très esthétiques.

Insérer le code dans votre thème WordPress

Il y a deux façons d’insérer le code dans votre thème WordPress :

  1. Soit en copiant le code HTML (onglet STANDARD dans l’interface Google Fonts Web) dans votre fichier header.php. Trouvez le tag <header> et coller le code tout de suite après le tag.
    Code google fonts Web - HTML
  2. Copier le code dans votre feuille de style CSS (onglet @IMPORT dans l’interface Google Fonts Web) juste après les informations du modèle « template » (généralement dans le fichier styles.css)
    Google fonts Web - IMPORT css

Appliquer la police Google à une balise de votre page

Voici un exemple sur perspective-jardins.com j’ai appliqué la police Raleway au menu, j’ai donc collé le code dans me fichier css pour la balise #nav a :

Code Google fonts Web appliqué à la balise #nav a
Vérifier l’affichage

Perspective-jardin AVANT

Perspective-jardin avant Google fonts Web

Perspective-jardin  APRÈS

 

Perspective-jardin après Google fonts Web

 

Dites-moi si vous avez essayé les polices Google déjà où si vous allez l’utiliser dans un site web futur.
Peut-être avez-vous utilisé Typekit ou autres services semblables?

2 Commentaires

Laisser un commentaire

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

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>