Vous n'avez pas assez de choix au niveau des polices d'écriture sur Blogger ou vous n'en trouvez pas une qui vous plaise ? Google Fonts vous propose des polices d'écritures assez sympas et variées !
Blogger,  Tutoriels Blogger

Blogger : Intégrer des polices Google Fonts

Vous n’avez pas assez de choix au niveau des polices d’écriture sur Blogger, ou vous n’en trouvez pas qui vous plaise ? Google Fonts vous propose des polices d’écritures assez sympas et variées !

Google Fonts met à votre disposition pas moins de 800 polices d’écritures, afin de varier les plaisirs ! Du sans-serif au serif en passant par le handwriting, le géant du web propose énormément de polices.  Pour un titre de blog, il faut avant tout que la/les police(s) que vous allez choisir soit lisible. Préférez une police serif ou sans serif du style Raleway, Arimo etc.

Intégration

Pour intégrer une police Google Fonts, il faut aller dans votre interface Blogger, dans la catégorie « Thèmes » et cliquer sur « Modifier le code HTML ».

On tombe sur le code HTML de votre blog. Ça peut faire peur à la première utilisation, mais vous verrez que plus vous pratiquerez, plus ça ira mieux ! Allez sur le site de Google Fonts et choisissez la police d’écriture en cliquant sur le petit +.

Un petit onglet se met en bas de la page marqué « 1 family selected ». Il vous suffit alors de cliquer sur l’icône moins. L’onglet s’ouvre et dévoile le code HTML et le code CSS de la police.

La balise HTML <link href> (le code HTML de la police) est à intégrer juste après la balise <head> de votre code HTML. Il vous suffit de coller le code <link href> sous la balise <head> et de rajouter un / avant la balise fermante comme ceci :

<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>

Pour le css, faites CTRL+F, collez le code .Header h1 { dedans puis tapez sur Entrée jusqu’à trouver le code suivant

Il vous suffit de copier le CSS de la page Google Fonts sous la balise .Header h1{ comme ci-dessous.

.Header h1 {
font-family: 'Roboto', sans-serif;

J’espère que ce premier tutoriel est assez clair pour vous et qu’il vous plaît !

À très bientôt, Claire. 

 

16 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.