Magazine Bd & dessins

Utiliser des polices Google Fonts

Par Catherine
Utiliser des polices Google Fonts sur Blogger
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 :)
Utiliser des polices Google Fonts sur Blogger
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 !
Utiliser des polices Google Fonts sur Blogger
Pour cet exemple j'ai choisi la police Satisfy. Pour la sélectionner cliquez sur Add to Collection :
Utiliser des polices Google Fonts sur Blogger
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 :
Utiliser des polices Google Fonts sur Blogger
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) :
Utiliser des polices Google Fonts sur Blogger
Copiez tout le code.
Maintenant ouvrez votre tableau de bord dans un nouvel onglet.
Allez dans Modèle puis Modifier le code HTML :
Utiliser des polices Google Fonts sur Blogger
Collez le code juste après <head> au début de votre code :
Utiliser des polices Google Fonts sur Blogger
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 :
Utiliser des polices Google Fonts sur Blogger
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 :
Utiliser des polices Google Fonts sur Blogger
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 !

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Catherine 742 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossiers Paperblog