Web Fonts - Des polices dignes d'un pharaon

Les titres de ta page sont censés ressembler à des inscriptions gravées dans la pierre. Pourtant, tu l'ouvres sur l'ordinateur d'un ami et tu vois une police système ordinaire, parce que la police que tu as choisie n'est pas installée sur son disque. Le navigateur ne peut utiliser que les polices qu'il connaît - à moins que tu ne les livres avec la page. Les hiéroglyphes de l'Égypte antique avaient leur style unique. De la même façon, ta page web peut utiliser des polices personnalisées grâce aux Web Fonts. Les polices système par défaut sont limitées, mais avec Google Fonts et la règle @font-face, tu peux utiliser des milliers de polices différentes.

Google Fonts - la bibliothèque de polices

Google Fonts est une bibliothèque gratuite de plus de 1500 polices. Pour utiliser une police de Google Fonts :

Méthode 1 : un lien dans le HTML (la plus simple)

Tu choisis une police sur fonts.google.com, et le service te donne des liens tout prêts à coller dans <head> - d'abord les connexions anticipées, puis la feuille de style avec la police :

1<head>
2  <!-- Ajoute le lien vers Google Fonts -->
3  <link rel="preconnect" href="https://fonts.googleapis.com">
4  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5  <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap"
6        rel="stylesheet">
7</head>

L'adresse du troisième lien dit ce que tu veux : la police family=Cinzel, les graisses 400 et 700, ainsi que display=swap. Le lien seul ne change pourtant rien sur la page - il faut encore désigner la police dans le CSS :

1/* Utilise la police dans le CSS */
2h1 {
3  font-family: 'Cinzel', serif;
4  font-weight: 700;
5}

Tu écris le nom de la police entre guillemets, puis, après une virgule, tu indiques une famille de secours. L'ordre des étapes est donc toujours le même : preconnect, le lien vers la police, et seulement ensuite font-family dans le CSS.

Méthode 2 : @import dans le CSS

Tu peux aussi charger la même police directement depuis un fichier CSS avec une règle @import, qui doit se trouver tout en haut de la feuille de style :

1/* Au début du fichier CSS */
2@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
3
4body {
5  font-family: 'Cinzel', serif;
6}

Cela fonctionne, mais plus lentement : le navigateur n'apprend l'existence de la police qu'après avoir téléchargé ta feuille de style. C'est pourquoi je te recommande la méthode avec <link>.

@font-face - tes propres polices

Si tu possèdes ton propre fichier de police, par exemple une police que tu as achetée, enregistre-la dans ta feuille de style avec la règle @font-face :

1@font-face {
2  font-family: 'EgyptianFont';
3  src: url('/fonts/egyptian.woff2') format('woff2'),
4       url('/fonts/egyptian.woff') format('woff');
5  font-weight: 400;
6  font-style: normal;
7  font-display: swap;
8}
9
10h1 {
11  font-family: 'EgyptianFont', serif;
12}

font-family donne à la police un nom à utiliser dans le CSS, et src énumère les fichiers en commençant par le meilleur format - le navigateur choisit le premier qu'il sait lire. Une police servie depuis ton propre serveur ne transmet pas non plus les adresses IP des visiteurs à Google, ce qui, dans l'UE, peut compter à cause du RGPD.

Les formats de polices :

• WOFF2 - la meilleure compression, pris en charge par les navigateurs modernes
• WOFF - une prise en charge plus large, une taille un peu plus grande
• TTF/OTF - formats traditionnels, sans compression pour le web

font-display: swap

Une police qui vient du réseau arrive toujours avec un certain retard. La propriété font-display décide de ce que le navigateur affiche avant que le fichier ne soit chargé :

1@font-face {
2  font-family: 'MyFont';
3  src: url('/fonts/font.woff2') format('woff2');
4  /* swap : affiche le texte avec une police système, remplace-la après le chargement */
5  font-display: swap;
6}

• swap - affiche tout de suite le texte avec la police de secours, puis la remplace une fois chargée
• block - cache brièvement le texte (généralement jusqu'à environ 3 s) en attendant la police
• fallback - un block très court (environ 100 ms), puis environ 3 s pour le remplacement, et si la police n'arrive pas à temps, la police de secours reste
• optional - si la police ne se charge pas presque instantanément, reste avec la police de secours

swap est le choix le plus sûr pour le contenu : le texte est lisible dès le premier instant, et le changement de police n'est qu'un bref clignement.

Preconnect et preload - accélérer le chargement

Quand tu sais qu'une police sera forcément nécessaire, tu peux prévenir le navigateur avec deux indications dans <head> :

1<head>
2  <!-- Preconnect - établis la connexion avec le serveur plus tôt -->
3  <link rel="preconnect" href="https://fonts.googleapis.com">
4  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5
6  <!-- Preload - commence à télécharger la police le plus tôt possible -->
7  <link rel="preload" as="font" type="font/woff2"
8        href="/fonts/egyptian.woff2" crossorigin>
9</head>

preconnect ouvre seulement la connexion avec le serveur, alors que preload télécharge immédiatement un fichier précis. Pour les polices, crossorigin est nécessaire même pour les fichiers de ton propre serveur - sans lui, le navigateur téléchargera le fichier deux fois.

La pile de polices (Font Stack)

Définis toujours des polices de secours, au cas où la police principale ne se chargerait pas. Le navigateur parcourt la liste depuis la gauche et prend la première police disponible :

1body {
2  /* Ordre : préférée -> de secours -> générique */
3  font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif;
4}

Règle générale : termine toujours la pile de polices par une famille générique. Les cinq classiques sont serif, sans-serif, monospace, cursive et fantasy, et des spécifications plus récentes en ont ajouté d'autres, comme system-ui. Ainsi, le navigateur aura toujours une police de secours sous la main. Pour un texte sans empattements, une pile typique est Arial, Helvetica, sans-serif, et pour du code 'Courier New', monospace.

L'optimisation des Web Fonts

Les polices web peuvent avoir un impact important sur les performances de la page. Voici quelques conseils d'optimisation :

1. Charge uniquement les graisses nécessaires

Chaque graisse demandée représente des données supplémentaires à télécharger, alors ne demande que celles que tu utilises vraiment :

1/* MAL - tu charges toutes les graisses */
2@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');
3
4/* BIEN - tu charges uniquement celles que tu utilises */
5@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

L'aspect de la page ne change pas, mais le navigateur a moins de données à télécharger - surtout avec les polices classiques, où chaque graisse est un fichier séparé.

2. Charge uniquement les caractères nécessaires (subsetting)

Si la page est uniquement en français, tu n'as pas besoin de charger les caractères chinois ou arabes :

1<!-- Charge uniquement les caractères latins -->
2<link href="https://fonts.googleapis.com/css2?family=Cinzel&subset=latin&display=swap"
3      rel="stylesheet">

Les lettres courantes du français, comme é, è, ç ou œ, font partie du jeu latin, alors que des lettres comme le ą, le ę ou le ł du polonais appartiennent à latin-ext. En pratique, Google Fonts découpe de toute façon une police en sous-ensembles grâce à unicode-range, si bien que le navigateur ne télécharge que les fichiers contenant les caractères qui apparaissent réellement sur la page.

3. Utilise des polices variables (Variable Fonts)

Les polices variables modernes (variable fonts) permettent de réunir toutes les graisses dans un seul fichier au lieu de plusieurs fichiers séparés :

1@font-face {
2  font-family: 'CinzelVariable';
3  src: url('/fonts/cinzel-variable.woff2') format('woff2');
4  font-weight: 100 900; /* Plage de graisses */
5  font-display: swap;
6}
7
8h1 {
9  font-family: 'CinzelVariable', serif;
10  font-weight: 650; /* N'importe quelle valeur de la plage ! */
11}

La plage 100 900 indique au navigateur quelles graisses le fichier contient, et dans tes règles, tu peux utiliser n'importe quelle valeur intermédiaire, par exemple 650.

La typographie - quelques propriétés supplémentaires

La police seule ne fait pas tout. La lisibilité dépend aussi des espacements, que tu connais grâce à la leçon sur la typographie accessible :

1p {
2  /* Espacement des lettres - comme des hiéroglyphes à intervalles réguliers */
3  letter-spacing: 0.05em;
4
5  /* Espacement des mots */
6  word-spacing: 0.1em;
7
8  /* Hauteur de ligne - lisibilité du texte */
9  line-height: 1.6;
10
11  /* Retrait de la première ligne du paragraphe */
12  text-indent: 2em;
13}

Les espacements en unités em s'adaptent à la taille de la police, un line-height sans unité agit comme un multiplicateur de cette taille, et text-indent met en retrait la première ligne d'un paragraphe.

Tout comme les hiéroglyphes de l'Égypte antique avaient leur style unique et reconnaissable, une police web bien choisie donne à ta page du caractère et du professionnalisme. Mon conseil : deux familles de polices par page suffisent - une décorative pour les titres et une bien lisible pour le texte. Dans la prochaine leçon, tu publieras ta page sur internet.

Pratique

Dans l'éditeur ci-dessous, tu compareras Cinzel et Lora avec une police système - vérifie dans le panneau Network quels fichiers sont téléchargés :

1<!DOCTYPE html>
2<html lang="fr">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Web Fonts - Polices</title>
7    <link rel="preconnect" href="https://fonts.googleapis.com">
8    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lora:ital,wght@0,400;0,700;1,400&display=swap"
10          rel="stylesheet">
11    <link rel="stylesheet" href="style.css">
12</head>
13<body>
14    <h1>Web Fonts en pratique</h1>
15
16    <section>
17        <h2>Police Cinzel (Google Fonts)</h2>
18        <p class="cinzel-demo">Ce texte utilise la police Cinzel -
19           un caractère élégant inspiré des inscriptions classiques.</p>
20        <p class="cinzel-bold">Version en gras (font-weight: 700)</p>
21    </section>
22
23    <section>
24        <h2>Police Lora (Google Fonts)</h2>
25        <p class="lora-demo">Ce texte utilise la police Lora -
26           une police à empattements moderne, idéale pour les textes plus longs.</p>
27        <p class="lora-italic">Version en italique (font-style: italic)</p>
28    </section>
29
30    <section>
31        <h2>Font Stack - polices de secours</h2>
32        <p class="stack-demo">
33            font-family: 'Cinzel', 'Georgia', 'Times New Roman', serif;
34        </p>
35        <p>Si Cinzel ne se charge pas, le navigateur utilisera Georgia,
36           puis Times New Roman, et enfin la police serif par défaut.</p>
37    </section>
38
39    <section>
40        <h2>Comparaison des polices</h2>
41        <p class="font-system">Police système (Georgia)</p>
42        <p class="font-cinzel">Police Cinzel (Google Fonts)</p>
43        <p class="font-lora">Police Lora (Google Fonts)</p>
44    </section>
45</body>
46</html>

Souviens-toi : une police, c'est l'écriture du scribe - ne demande que ce dont tu as besoin, et garde toujours une police de secours en cas de tempête de sable.