# data[].attributes.body
Police d’écriture joue un rôle important dans le design d’un site. Non seulement elle rend les textes plus agréables au regard, mais elle peut aussi engendrer une envie d’aller plus loin dans sa lecture. Plus elle est captivante, plus la change d’être visitée et d’être revisitée est grande pour le site ou le blog. En ce sens, la typographie est un élément à ne pas négliger pour ne pas perdre du trafic puisqu’en général, les internautes viennent sur internet pour trouver des réponses idéalement dans le confort et non pour déchiffrer des charabias.

# data[].attributes.body
Google Fonts (appelé Google Webfonts avant juin 2013) est un service d’hébergement gratuit de polices d’écritures pour le Web démarré en 2010.

# data[].attributes.attachment_link.description
Making the web more beautiful, fast, and open through great typography

# data[].attributes.attachment_link.readable_text
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.

Sommaire

1. Sélectionner une police

2. Ajouter la police sur Blogger

3. Modifier la police sur votre blog

4. Message d'erreur lors de la sauvegarde

5. Sélections de polices Google Fonts

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 unaperçu des différentes polices.
A droite, vous trouverez desoptions 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 :

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 :

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

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 :

# data[].attributes.attachment_link.title
Utiliser des polices Google Fonts - Lady bird red

# data[].attributes.attachment_link.description
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 ?

# data[].attributes.body
Web designer

Type designer

Infographists

Le marketing

Les éditeurs

La presse...