Précharger les polices facultatives sans décalage ni FOIT

L’extraction et le rendu des polices web peuvent provoquer des décalages de mise en page de deux manières : soit une police de remplacement est échangée contre la police définitive (flash de texte sans style), soit du texte reste invisible jusqu’à l’affichage de la police (flash de texte invisible, ou FOIT). Dans les deux cas, le contenu bouge, l’utilisateur est gêné et le CLS se dégrade.

Ces décalages ont un impact SEO concret : ils dégradent le Cumulative Layout Shift (CLS), l’un des Core Web Vitals qui mesure l’instabilité visuelle d’une page. À partir de Chrome 83, il existe une combinaison qui supprime totalement ces à-coups pour les polices facultatives : associer la balise rel= »preload » à la déclaration font-display: optional, dans le prolongement des bonnes pratiques pour optimiser le chargement des polices.

La propriété CSS font-display contrôle le comportement d’affichage d’une police personnalisée chargée de façon asynchrone. Elle s’appuie sur une chronologie faite de périodes pendant lesquelles le navigateur décide quoi afficher. Le tableau ci-dessous résume les valeurs principales et leur effet.

Auparavant, une police déclarée en font-display: optional disposait d’une période de blocage de 100 ms sans période d’échange. Si la police se téléchargeait dans ce délai, elle s’affichait ; sinon, la police de remplacement prenait le relais sans échange ultérieur. Le souci, c’est que Chrome effectuait malgré tout un second rendu de la page dans les deux cas, ce qui provoquait un léger scintillement et parfois un décalage de mise en page, même quand la police était déjà en cache.

Depuis Chrome 83, des optimisations suppriment ce premier cycle de rendu pour les polices facultatives préchargées. Le rendu est bloqué jusqu’à ce que la police soit chargée ou qu’un délai s’écoule. Résultat : plus de décalage de mise en page ni de flash de texte invisible. Ce comportement correspond à la spécification, selon laquelle une police facultative ne doit jamais déclencher de refonte.

Le préchargement n’est pas obligatoire pour une police facultative, mais il augmente fortement les chances qu’elle soit chargée avant le premier cycle de rendu, surtout si elle n’est pas encore dans le cache du navigateur. C’est cette combinaison qui garantit l’affichage le plus fluide.

Concrètement, vous ajoutez une balise link rel= »preload » pointant vers le fichier de police, avec l’attribut as= »font », puis vous déclarez font-display: optional dans votre règle @font-face. Le navigateur récupère la police tôt et, grâce à optional, n’impose aucune refonte si elle n’arrive pas à temps.