Logo OFC On fait comment ?

Installer une ou plusieurs Google Fonts sur son site web

Installer une ou plusieurs Google Fonts sur son site web

Lors de la création d'un site internet, la question du choix de la police demeure relativement important. Proposer une police d'écriture agréable est primordial pour le confort de ses utilisateurs. Pour vous aider, Google met à la disposition des gérants de site internet un service leur permettant d'utiliser de façon très simple plusieurs polices d'écriture.

Ce service n'est autre que le fameux Google Fonts. Plusieurs centaines de polices d'écriture sont mises à votre disposition entièrement gratuitement. Il ne vous reste plus qu'à faire votre choix. Pour installer une Google Font, suivez donc les étapes suivantes :

1/ Choix de la ou les police(s) d'écriture voulue(s)

En naviguant sur le site, vous serez amené à découvrir plusieurs polices d'écriture. Lorsque l'une d'elles vous plait, ajoutez-là à votre collection via le bouton Ajouter à la collection - Google Fonts. Une fois cliqué, la police devrait être ajoutée dans le cadre qui est situé tout en bas de la page. Continuez ainsi en sélectionnant toutes les polices d'écriture que vous souhaitez intégrer sur votre site web.

2/ Choisissez les styles des polices d'écriture

Une fois votre sélection de polices effectuées, cliquez sur le bouton "Use" qui apparait tout à droite du cadre dans lequel sont ajoutées vos polices d'écriture. Sur la page qui apparait, vous retrouverez les polices d'écriture que vous aurez choisies : il faut ensuite choisir les styles de votre choix (gras, gras italique, très gras, fin, etc.) en fonction de l'usage que vous souhaitez en faire.

Lors de cette sélection, un compteur est affiché sur votre droite pour vous donner un indice quant à la durée nécessaire pour charger les polices d'écriture choisies. Plus leur nombre sera important, plus le temps de chargement sera long.

Les différents styles pour une même police d'écriture

3/ Sélection du jeu de caractères

En général, vous n'aurez pas besoin de toucher à cette partie à moins que vous n'ayez un site dont la langue est le grec, le vietnamien ou toute autre langue utilisant l'alphabet cyrillique. Pour le français, la case "Latin" étant déjà cochée, vous pouvez par conséquent passer à l'étape suivante.

4/ Morceau de code à insérer sur votre site

Après avoir réalisé les étapes précédentes, continuez à défiler la page et vous devrez trouver un cadre dont le titre est "Add this code to your website". Là vous est proposée trois manières différentes d'importer les polices sur votre site :

  • la méthode standard : Google vous propose une balise <link> que vous devez insérer entre les balises <head></head> de votre site.
  • la méthode @import : le code qui vous est proposé ici doit être intégré directement dans vos feuilles de styles CSS.
  • la méthode JavaScript : pour cette méthode, le code doit être inséré directement dans la page dans laquelle vous souhaitez utiliser les polices d'écriture choisies. Cette méthode peut être utile dans le cas où la police d'écriture ne sera pas utilisée sur l'ensemble du site.

À vous de choisir la méthode qui vous convient le mieux. Mais parmi ces trois méthodes, la plus aisée et simple à mettre en place est la seconde puisque le code fourni est à intégré dans une feuille de styles, cette dernière ne pouvant être codée qu'en langage CSS.

5/ Utilisation de la police d'écriture que vous avez installée

Une fois avoir installé la police d'écriture, il ne vous reste plus qu'à l'utiliser dans vos styles CSS. Cela s'effectue à l'aide de la propriété font-family.

Exemple : si vous souhaitez que tous vos paragraphes soient rédigés avec la police Open Sans, le code à entrer dans votre feuille de styles est le suivant :

  p
  {
    font-family: "Open Sans", Sans-serif;
  }

Ce tutoriel nécessite de maîtriser un tant soit peu le CSS. Si vous n'êtes pas au point, vous pouvez vous rendre sur ce site internet qui vous apprendra les bases de ce langage de programmation.

Si vous avez aimé ce tutoriel ou qu'il vous a été utile, n'hésitez pas à le partager à l'aide des boutons suivants :

Publié le jeudi 30 juillet 2015 à 13h00
Mis à jour le mardi 27 juin 2017 à 10h50

Laisser un commentaire


 

Vous pouvez utiliser les balises HTML suivantes : <b>gras</b> <i>italique</i> <q>citation</q>