GoogleFonts® est une excellente ressource pour les intégrateurs web, puisqu’elle donne instantanément à votre site web un nouvel aspect en changeant la typographie de ses pages. Google propose plus de 1000 polices différentes. Simple à mettre en place et à utiliser, il est cependant important de comprendre que la méthode proposée par Google multiplie les échanges serveurs, donc la consommation énergétique de votre site, et nécessite d’être connecté au réseau internet pour avoir accès aux typographies.
Intégrer la typo à sa page web
La première étape est assez simple, il suffi de se rendre sur le site googlefonts. Une fois sur la page, vous avez accès à l’ensemble des typographies proposées par Google. Ces typographies peuvent contenir un certain nombre de déclinaisons allant de la version « thin » à « black ». Il n’y a qu’a faire son choix.
Choisir sa Typographie
Prenons l’exemple de la typo Roboto, cette typographie contient 12 déclinaisons :
Il vous est possible de choisir une ou plusieurs déclinaison de la typo. Pour notre exemple nous choisirons la version « light300 », « regular400 » et « bold700 » en cliquant sur le bouton bleu « + select this style« . Il est important de limiter son choix aux seules versions utilisées dans nos pages de manière à ne pas surcharger inutilement notre site web.
Lors de la sélection des versions de notre typo, un volet s’ouvre sur la droite de l’écran. Dans ce volet, vous verrez apparaitre deux blocs gris contenant des lignes de code.
Intégrer la feuille de style GoogleFonts
Le premier bloc contient les lignes d’appel à la feuille de style CSS hébergée par le système.
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet"> Ces lignes devront être intégrées à vos page au même endroit que l’appel à votre style CSS, entre les balises <head> et </head>.
Utiliser la typographie dans notre CSS
Dans le second bloc, nous pourrons récupérer la règle CSS à intégrer dans notre feuille de style. Cette règle permettra d’appliquer la typographie aux éléments html.
font-family: 'Roboto', sans-serif;Si nous souhaitons applique la typo Roboto à l’ensemble de notre document, nous pourrons cibler l’élément body et lui appliquer cette règle :
body {
font-family: 'Roboto', sans-serif;
}Il ne nous reste plus qu’a définir quelle déclinaison de notre typographie appliquer à l’élément souhaité. Par exemple, si je souhaite appliquer la version light de ma typo aux éléments <h2> de ma page, je procèderais comme ceci :
h2 {
font-family: 'Roboto', sans-serif;
font-weight: 300;
}La règle font-weight permet de spécifier la graisse de ma typo, la valeur numérique correspond au chiffre spécifié sur la page google avec la version de notre typo. Ici nous appliquons la version light300, nous donnons donc 300 en valeur de graisse.
Notre typographie est désormais appliquée à l’ensemble des textes de notre site et sa version light à tous nos éléments <h2>.
Il existe d’autres possibilités moins énergivores pour intégrer une police spécifique à notre site, nous y reviendrons plus tard.