Google fonts

Depuis 2010, le site Google fonts offre plusieurs centaines de polices (+ de 850) gratuitement, hébergées directement en ligne et prêtes à être utilisées.

Lorsqu'une police intéressante est trouvée, il suffit de cliquer sur le lien bleu "+ Select this style" afin de l'ajouter à la liste des polices qui seront importées. Plusieurs fontes peuvent être ajoutées dans une même liste. Il n'est pas nécessaire d'importer chacune d'entre elles séparément.

Lorsque toutes les polices désirées sont sélectionnées, le bouton en haut à droite permet d'ouvrir le panneau d'importation.

Importation standard

La méthode standard est la méthode la plus performante et celle recommandée. Elle consiste à ajouter une balise <link> dans le <head> d'un fichier HTML.

Par exemple:

<head> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/styles/main.css"> </head> Les balises de la police Google doivent apparaître avant celle de votre feuille de styles. Ainsi la police sera déjà importée quand vous y ferez référence. Importation @import Importation @import

La méthode @import consiste à ajouter une balise <style> dans le <head> du fichier HTML. Cependant, cette méthode est moins performante que la méthode standard.

Par exemple:

<style> @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); </style> Utilisation

Et voilà, les fontes sont maintenant prêtes à être utilisées comme toute police normale simplement en utilisant leurs noms spécifiés dans le bas du panneau d'importation.

Par exemple:

.title { font-family: 'Roboto', sans-serif; } Billet débuter avec Google Fonts par Google.
EXERCICE Google Fonts - Bart Pour cet exercice, vous devez recréer une scène de générique d’introduction de l’épisode 18 de la saison 28 des Simpsons.