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>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; }