Pour personnaliser un peu plus son blog et le rendre plus agréable à lire, il est possible d’utiliser des polices un peu plus fantaisies que celles de base. Dans cet article nous allons apprendre à utiliser les Google fonts et changer la police des titres de vos articles. Sur le web, il existe une dizaine de polices « standard » qu’on peut utiliser sans manipulation particulière. Il y a par exemple : Times New Roman, Georgia, Arial, Verdana etc. Ces polices sont basiques, déjà vues et vraiment pas personnelles du tout. Sur Blogger, on peut utiliser facilement la bibliothèque de polices mise à disposition pour Google : Google Fonts. Ce sont des polices gratuites et libres de droits pour vos projets personnels et commerciaux.

Place au tutoriel en quatre petites étapes :

1 – Choisir la police

Cette étape ne fait pas appel à la technique et pourtant je suis sure que c’est celle qui vous prendra le plus de temps 😉 ! Ce n’est pas évident d’arrêter son choix mais pour vous aider, je vous conseille d’entrer un de vos titres dans la partie « preview test » afin de mieux visualiser le rendu puis de choisir à gauche le type de polices que vous souhaitez. Moi j’ai un faible pour les polices manuscrites.

2 – Récupérer le code

Une fois que vous avez fait votre choix, il faut cliquer sur le bouton « quick-use » à gauche de « add to collection » comme sur l’image ci-dessus. Allez dans le bloc 3 et copiez-collez le code :

3- Insérer le code de la police

Comme d’habitude on se rend dans la partie « Modèle » puis « modifier le code HTML.

Copiez-collez le code de la police juste avant la balise

/!\ Il faut rajouter un slash juste avant la balise de fin  » > » devient « /> »

Une fois que la police est ajoutée au blog, vous pouvez l’utiliser.

4 – Appliquer la police

Pour attribuer la police à un élément, il faut se rendre dans le code CSS.

Recherchez la ligne :  h3.post-title.entry-title et ajoutez ou remplacez la ligne font-family par ce vous pouvez trouver dans le bloc 4 sur le site Google fonts.

h3.post-title.entry-title {
 ...
    font-family: 'Pacifico', cursive;
  ...
}

Et voilà le résultat !
Et vous, laquelle avez-vous choisie ?