Utiliser des polices Google Fonts

Cet article à été mis à jour en Septembre 2016

Qui n'a pas eu envie de changer la police d'un titre sur son blog mais s'est retrouvé avec un choix réduit à Arial, Times New Roman, Helvetica ou autre police standard du web ?

Et bien sachez qu'il existe des centaines d'autres polices prêtes à être utilisées et qui ne souhaitent que s'installer sur votre blog !

Google Fonts est un site web qui propose, de manière totalement gratuite, une bibliothèque de polices à utiliser sur son blog ou son site web.

Tout d'abord il faut aller sur le site de Google Fonts et choisir une police.

Le site propose tout type de police : serif, sans serif, écriture manuscrite, etc. A vous de choisir ce qui vous plaît !

A gauche de la page vous trouverez un aperçu des différentes polices.
A droite, vous trouverez des options de recherche. Vous pouvez sélectionner les catégories de polices qui vous intéressent, les langues disponibles, l'épaisseur, etc.

Sélectionner une police

Dans cet exemple je vais utiliser la police Josefin Slab. Pour sélectionner une police, cliquez sur le bouton rouge en haut à droite de la police, comportant un signe +

Une boîte noir apparaît en bas de la page. Cliquez sur la boîte pour l'ouvrir :

Copiez le code qui se trouve sous Standard. C'est le code qui va permettre d'ajouter la police à votre blog.

Ajouter la police sur Blogger

Pour ajouter votre police Google Fonts sur Blogger, allez sur votre tableau de bord. Cliquez sur Modèle, puis sur Modifier le code HTML :

Cliquez dans la boîte de code. Puis appuyez sur Ctrl et F en même temps (Cmd et F sur Mac).

Un champ de recherche doit apparaître en haut à droite de la boîte de code. Si ce n'est pas le cas, s'il s'affiche en haut de la page web, alors recommencez en cliquant bien à l'intérieur de la boîte de code !

Dans le champ de recherche collez :

</head>

Appuyez sur Entrer et vous serez dirigé vers cette ligne dans votre code.

Au-dessus de cette ligne, collez le code de votre police que vous avez copié de Google Fonts. Dans mon exemple, ce code est :

<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet">

Attention ! Détail très important : avant le signe > à la fin de la ligne de code ajoutez / comme ceci :

<link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet"/>

Si vous ne faites pas cette étape, un erreur s'affichera lors de la sauvegarde du thème. Si l'erreur s'affiche vérifiez que vous avez bien rajouté le signe /

Modifier la police sur votre blog

Maintenant que vous avez ajouté la police à votre blog, il faut changer la police de l'élément que vous voulez modifier (titre, texte, etc.).

Pour trouver le code à utiliser, retournez sur la page Google Fonts. Copiez le code qui se trouve sous Specify in CSS :

Ce code CSS définit la police d'un élément.

Maintenant il faut modifier le code CSS correpondant à l'élément à modifier. Pour les titres des articles, si vous avez déjà suivi ce tutoriel alors retrouvez le code commençant par :

h3.post-title {

Ajoutez le code CSS donné par Google Fonts avant le signe } de ce code CSS. Par exemple :

h3.post-title {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 22px;
    font-family: 'Josefin Slab', serif;
}

Pour trouver les codes CSS pour modifier d'autres éléments du blog, je vous laisse découvrir mes autres tutoriels ;)

Message d'erreur lors de la sauvegarde

Si vous obtenez un message d'erreur lors de la sauvegarde de votre thème, vérifiez que vous avez bien rajouté le signe / lors de cette étape ;)

Sélections de polices Google Fonts

Pas envie de chercher une police pendant des heures ? Voici quelques sélections et associations de polices Google Fonts pour vous :

Menu

Lady Bird Red