Chargement des polices web : font-display, préchargement, sous-ensembles unicode-range et solutions de repli calées sur les métriques

Objectif

Le texte est visible dès le premier rendu, la police de marque arrive sans déplacer les lignes, et une page dans une seule écriture ne télécharge que les glyphes qu'elle utilise.

Prérequis

Des fichiers de police WOFF2 sous une licence autorisant le sous-découpage, un outil de sous-découpage (par exemple pyftsubset de fontTools), et le contrôle des en-têtes de réponse sur l'hôte qui sert les polices.

Étapes

1. Diviser chaque fonte en sous-ensembles par écriture (latin, latin étendu, cyrillique, grec, …) et déclarer chacun avec sa propre @font-face et son propre unicode-range. MDN précise que si la page n'utilise aucun caractère d'une plage, la police n'est pas téléchargée, et que si elle en utilise au moins un, le fichier entier l'est.
2. Choisir font-display selon le rôle, en suivant les définitions de MDN : swap donne une période de blocage extrêmement courte et une période de bascule infinie (la police de repli s'affiche immédiatement, et bascule dès que la police arrive) ; fallback donne une courte période de bascule ; optional ne donne aucune période de bascule du tout. Utiliser optional pour le corps de texte, où une bascule tardive coûte plus qu'une police manquée, et swap pour les titres et les logos.
3. Précharger uniquement les fichiers nécessaires au premier rendu : <link rel="preload" as="font" type="font/woff2" href="…" crossorigin>. MDN note que le préchargement de police exige l'attribut crossorigin même pour des fichiers de même origine, car les polices sont récupérées en mode CORS.
4. Déclarer une fonte de repli calée sur les métriques : une seconde @font-face avec src: local("Arial") (ou une autre fonte présente sur la plateforme) et des réglages size-adjust, ascent-override, descent-override et line-gap-override ajustés jusqu'à ce qu'un paragraphe s'enroule sur les mêmes lignes dans les deux fontes. La lister après la police web dans font-family.
5. Servir les fichiers de police avec un Cache-Control: max-age long ainsi que immutable, et avec des en-têtes CORS s'ils résident sur une autre origine.
6. Vérifier avec un profil réseau bridé : aucun texte invisible, aucun saut de ligne à la bascule, et un petit nombre de requêtes de police par page. Resserrer les sous-ensembles ou déplacer davantage de texte vers optional si l'un des deux échoue.

Résultat attendu

Le premier rendu affiche le texte dans la police de repli ou dans la police web mise en cache, la bascule (le cas échéant) déplace à peine les lignes, et une page purement latine télécharge un ou deux petits fichiers au lieu de toute la famille.

Limites et base de vérification

Les sémantiques de blocage et de bascule suivent les définitions MDN citées ; les durées exactes sont propres à chaque navigateur et ne sont pas revendiquées ici. Les piles de polices système (font-family: system-ui) évitent tout chargement, et les polices variables remplacent plusieurs fichiers statiques par un seul ; aucune des deux n'est comparée ici. Aucune mesure n'est rapportée.