Une police personnalisée avec Google Font

google-web-fonts

Google, notre moteur de recherche propose des font en libre utilisation sur https://www.google.com/fonts, c’est un moyen alternatif pour ne pas utiliser @font-face et le plus simple dans la pratique. Cela se fait à partir d’un url distante à intégrer directement dans son CSS.

Les polices proposées sont en général adaptées à la majorité des navigateurs, Google Font se chargera de fournir la police à l’utilisateur, ce qui peut être intéressant sachant que la plupart des polices font entre 50ko et 400ko.

Un autre point fort pour Google Font est la gratuité du service.

Google Font API

L’API de Google Font est très maniable. L ‘appel de l’url distant suffit.

L’exemple officiel explique le bien fonctionnement:

Plus de @font-face à générer. Tout se fera du coté serveur de Google qui analyse quel navigateur est celui de l’utilisateur, et renvoie le code CSS adéquat.

L’utilisation de l’API se résume donc à :

  • Appeler le font qui nous intéresse
  • L’appliquer à un élément avec font-family

Pour comprendre un peu le sens des syntaxes un peu bizarre dans ce css géneré par google , on pourra construire manuellement cet url .

Construction de l’URL de l’API Google Font

L’url est assez basique, ça commence toujours par :

Puis on inclut les différentes polices qu’on va utiliser tout en remplaçant “+” à la place des espaces, et en séparant chaque police par un “|”, cette façon d’appeler plusieurs font d’un coup est intéressante pour limiter le nombre de requête http.

Enfin, il est possible de spécifier si l’on souhaite une police en italique ou en gras en ajoutant des valeurs après le nom de la police suivi par le caractère “:”.
Voici les différentes valeurs possibles :

  • Italique : “italic” ou “i”
  • Gras : “bold”, “b” ou le poids 300 à 900
  • Gras italique : “bolditalic” ou “bi”

Répondre