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.
Aujourd'hui je vais vous expliquer comment les utiliser :)
Tout d'abord il faut aller sur le site de Google Fonts et choisir une police.
Le site propose tout type de police avec sérif, sans sérif, écriture manuscrite, etc. A vous de choisir ce qui vous plaît !
Pour cet exemple j'ai choisi la police Satisfy. Pour la sélectionner cliquez sur Add to Collection :
La police apparaît alors dans votre collection en bas de l'écran.
Vous pouvez ajouter plusieurs polices à votre collection ou n'en choisir qu'une.
Cliquez ensuite sur Use en bas à droite :
Sur la prochaine page descendez jusqu'à l'étape 3 "Add this code to your website", qui vous donne le code à coller dans votre code HTML pour que la police fonctionne sur votre blog/site.
Avec Blogger j'ai remarqué que la version Standard ne fonctionne pas toujours très bien. Du coup je préfère utiliser le code Javascript (3e onglet) :
Copiez tout le code.
Maintenant ouvrez votre tableau de bord dans un nouvel onglet.
Allez dans Modèle puis Modifier le code HTML :
Collez le code juste après <head> au début de votre code :
Enregistrez. Vous avez installé la police !
Maintenant pour utiliser votre police, retournez sur l'onglet Google Fonts.
Allez à l'étape 4. Ici vous trouverez le code CSS à ajouter à vos titres (ou tout autre texte) pour leur appliquer cette police :
Dans mon exemple je souhaite appliquer cette police aux titres des articles.
Je modifie donc le code CSS correspondant :
h3.post-title {
font-family: 'Arial', sans-sérif;
font-weight: 100;
font-size: 22px;
color: #5b5b5b;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
}Devient :
h3.post-title {
font-family: 'Satisfy', cursive;
font-weight: 100;
font-size: 22px;
color: #5b5b5b;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
padding-left: 0;
}Ce qui donne :
Et voilà comment utiliser des polices avec Google Fonts ! :)
Pour plus d'informations sur la modification de l'apparence des titres des articles je vous propose de lire le tuto qui traite du sujet ;)
Bon blogging !