Chargement des polices web : font-display, preload et sous-ensembles
Chargement des polices web
Chargement des polices web : font-display, preload, sous-ensembles | We.Inc
Voyez ce que fait chaque valeur de font-display grâce à un simulateur de chronologie, puis utilisez preload, preconnect, des sous-ensembles avec unicode-range et des métriques de fallback ajustées pour éviter le layout shift.
Un chargement rapide des polices tient en quatre gestes : signaler la police tôt au navigateur (preconnect ou preload), envoyer de petits fichiers WOFF2 qui ne contiennent que les caractères nécessaires, choisir une valeur de font-display adaptée au texte, et dimensionner la police de secours pour qu'elle corresponde afin que rien ne saute. Utilisez font-display: optional quand éviter le layout shift est la priorité.
Les valeurs de font-display en un coup d'œil
Valeur
Texte pendant le chargement
La police arrive en retard
Idéal pour
Police de secours presque immédiatement
Toujours remplacée
Texte courant qui doit s'afficher tout de suite
Police de secours presque immédiatement
Pas de remplacement ; la police de secours reste
Layout shift minimal
Police de secours presque immédiatement
Remplacée seulement dans les 3s environ
Un compromis
Invisible pendant 3s environ au maximum
Toujours remplacée
Polices d'icônes, logos composés en texte
Le navigateur décide
Le navigateur décide
Laisser faire le navigateur
Les polices font partie des rares ressources capables de masquer votre texte ou de bousculer la mise en page. Faites glisser le curseur ci-dessous pour régler le temps que met une police à arriver et observez ce que chaque valeur de font-display affiche à chaque instant, puis copiez les techniques de chargement qui gardent les pages stables.
Réglez le curseur sur le temps de téléchargement de votre police sur une connexion lente.
Lisez chaque ligne : le gris correspond au texte invisible, l'ambre à la police de secours, le bleu à la police web.
Repérez les valeurs qui changent de police tardivement. Un changement tardif, c'est le moment où le texte visible se réorganise.
Copiez les extraits pour preload, les sous-ensembles unicode-range et les polices de secours ajustées.
Polices auto-hébergées : placez les règles @font-face en ligne dans le head pour que le navigateur les trouve sans attendre une autre feuille de style.
Ne préchargez qu'un ou deux fichiers critiques. Précharger toutes les graisses entre en concurrence avec vos images et vos scripts.
Ajoutez toujours crossorigin au preload d'une police, même pour des fichiers sur votre propre domaine, sinon le navigateur télécharge le fichier deux fois.
Servez du WOFF2. Il se compresse mieux que le WOFF et tous les navigateurs actuels le lisent.
Terminez toujours chaque liste font-family par une famille générique adaptée, pour que le texte s'affiche même si le téléchargement échoue.
Questions fréquentes
Que fait font-display: swap ?
Il donne à la police une période de blocage extrêmement courte, que la spécification CSS Fonts recommande de limiter à 100ms ou moins, et une période de remplacement infinie. Le texte apparaît presque immédiatement dans la police de secours et passe à la police web dès qu'elle a fini de charger.
font-display: swap est-il mauvais pour le CLS ?
Il peut l'être. Si la police de secours et la police web ont des largeurs ou des hauteurs de ligne différentes, le changement tardif déplace le texte et le contenu situé en dessous. Corrigez cela avec size-adjust et les surcharges ascent, descent et line-gap sur la police de secours, ou utilisez optional.
Pourquoi ma police préchargée est-elle téléchargée deux fois ?
Les polices sont récupérées en mode CORS anonyme, donc le lien de preload a besoin de l'attribut crossorigin même quand le fichier est sur la même origine. Sans lui, le preload ne correspond pas à la vraie requête et la police est téléchargée à nouveau.
Faut-il précharger Google Fonts ?
En général non. web.dev avertit que le préchargement contourne une partie de la négociation de contenu propre au navigateur, y compris unicode-range, si bien que vous risquez de télécharger un sous-ensemble que la page n'utilise jamais. Faites plutôt un preconnect vers fonts.googleapis.com et fonts.gstatic.com, ou auto-hébergez et préchargez votre propre fichier.
Comment unicode-range fait-il économiser des octets ?
Quand une règle @font-face a un unicode-range, le navigateur ne télécharge ce fichier que si la page utilise au moins un caractère de la plage. Découpez une police en fichiers latin, cyrillique ou grec, et chaque visiteur ne télécharge que les écritures présentes sur la page.
La chronologie d'affichage des polices
Quand un texte a besoin d'une police qui n'est pas encore arrivée, le navigateur passe par trois périodes au maximum. Pendant la période de blocage, il met le texte en page avec une police de secours invisible. Pendant la période de remplacement, il affiche la police de secours et bascule quand la police arrive. Vient ensuite la période d'échec, où la police de secours reste définitivement.
font-display ne change que la durée des deux premières périodes. Les valeurs du simulateur sont celles que recommande le brouillon CSS Fonts Level 4 ; les navigateurs peuvent utiliser des délais légèrement différents.
Pourquoi les remplacements tardifs provoquent du layout shift
Même un texte invisible occupe un espace mesuré avec la police de secours. Quand la vraie police la remplace, chaque ligne peut s'élargir ou se rétrécir, les paragraphes se recomposent et tout ce qui est en dessous bouge. Ce mouvement est comptabilisé dans le Cumulative Layout Shift.
Il existe deux remèdes. Évitez complètement le remplacement tardif avec optional, ou faites occuper à la police de secours le même espace que la police web grâce à size-adjust et aux descripteurs de surcharge de métriques sur une police de secours local().
Les sous-ensembles
Une police de plusieurs milliers de glyphes est du gaspillage pour une page qui en utilise une centaine. Les outils de sous-ensemble suppriment les caractères inutilisés avant l'envoi du fichier, et unicode-range permet au navigateur d'ignorer des fichiers entiers dont il n'a pas besoin.
Pour un court texte d'affichage, l'API Google Fonts accepte un paramètre text= et renvoie un fichier contenant uniquement ces caractères. C'est pratique pour un logo ou un titre unique composé dans une police décorative.
Police auto-hébergée avec preload
Préchargez le seul fichier dont le premier écran a besoin
as, type et crossorigin doivent tous être présents. La règle @font-face est en ligne dans le head pour être découverte immédiatement.
Fichiers découpés avec unicode-range
Sous-ensembles latin et cyrillique d'une même famille
Les deux règles partagent le même nom de famille. Une page rédigée uniquement en anglais ne télécharge jamais le fichier cyrillique.
Une police de secours dimensionnée pour correspondre
Police de secours locale ajustée pour réduire le layout shift
Les nombres sont des valeurs d'exemple : mesurez votre propre police par rapport à la police de secours et ajustez-les jusqu'à ce que les deux s'alignent.
Google Fonts avec preconnect et un sous-ensemble pour un titre
La seconde feuille de style ne demande que les lettres du texte du logo, ce qui garde ce fichier minuscule.
Blocage extrêmement court, pas de période de remplacement
Simulateur de chronologie font-display
Vue de départ : la police met 1.5 seconde à charger ; faites glisser le curseur pour modifier ce délai. Le gris correspond au texte invisible, l'ambre à la police de secours, le bleu à la police web.
La police arrive après {n}s
Police web non utilisée lors de cet affichage de la page
Remplacement visible : le texte peut se réorganiser
Aucun remplacement visible
Échelle : de 0 à 5 secondes. Avec optional, la spécification permet au navigateur d'abandonner un téléchargement tardif ou de le terminer en très basse priorité.