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 une qui vous plaise ? Google Fonts vous propose des polices d'écritures assez sympas et variées !

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. 

 

19 commentaires

  1. Coucou,
    Oh c’est chouette comme tuto, ça va certainement en aider beaucoup ! Perso je suis sous WordPress donc pas vraiment concernée par blogger^^ Mais c’est toujours top d’avoir de belles polices 🙂
    Des bisous !

    1. Hello ! J’essaie de partager pas mal de choses qu’on ne voit pas souvent sur internet ! On est très peu à partager des conseils sur Blogger et comme je connais bien la plateforme je me suis dit que ça pouvait aider certaines !

    1. Hello ! Je pense que si tu as accès au code de ton blog, tu dois pouvoir aussi faire la manip sur Overblog ! Après je connais pas assez la plateforme pour te le confirmer ! 🙂

  2. Bonjour !

    Très intéressant car il est vrai qu’il n’y a pas assez de polices disponibles ! Mais je reconnais que j’ai toujours un peu peur de tripatouiller dans tous ces codes ! ^^

    Merci pour cet article ! Bon week-end !

    1. Hello ! Eh bien il faut prendre son temps quand on tripatouille ! Sinon on casse tout le code et après c’est la galère (je sais de quoi je parle, ça m’est aussi arrivée) lol.
      De rien et à bientôt !

    1. Hello! Il y a tellement de polices que c’est compliqué de choisir ! Ah c’est cool de se faire aider pour l’intégration, ça peut être compliqué certaines fois !

  3. J’ai partagé ton article sur twitter. Etant moi-même sous blogger, ça m’intéresse !
    Après, je suis restée classique du côté des polices. Mais j’irai regarder ce qui est proposé.
    Merci de penser à nous sur blogger ! Il est vrai qu’on ne trouve pas grand chose. Les tutos sont souvent pour wordpress.
    Belle journée
    Elsa

    1. Hello ! Oh merci c’est gentil ♥ Je suis contente que ça t’intéresse parce qu’en effet, c’est plutôt le vide du côté des tutos Blogger ^^
      Bonne journée à toi aussi !

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.