Optimisation des polices web : font-display et FOUT/FOIT

Une bonne stratégie d'optimisation des polices web fait toute la différence entre une page qui se charge vite et une page qui se charge avec stabilité visuelle. Quand les polices arrivent tard au navigateur, le texte reste soit invisible (FOIT), soit s'affiche d'abord dans une police de secours puis « saute » lors du remplacement (FOUT). Dans cet article, j'explique comment contrôler ces deux comportements avec font-display, preload, WOFF2 et le subsetting, et comment préserver vos scores Core Web Vitals au passage.

La différence entre FOUT et FOIT

Les deux sigles décrivent le moment de transition pendant le chargement d'une police personnalisée :

• FOIT (Flash of Invisible Text) : le navigateur n'affiche aucun texte tant que la police n'est pas arrivée. L'utilisateur voit un vide, et si la police est lente, le contenu peut rester invisible plusieurs secondes.
• FOUT (Flash of Unstyled Text) : le navigateur affiche d'abord le texte avec une police système de secours, puis le redessine une fois la police personnalisée chargée. Le contenu est lisible immédiatement, mais on observe un décalage visible quand la largeur des glyphes change.

Le FOUT est généralement préférable au FOIT : l'utilisateur commence à lire sans attendre. Le véritable objectif est de rendre cette transition maîtrisée et sans saut.

Contrôler le comportement avec font-display

Le descripteur font-display décide comment le navigateur dessine le texte pendant le téléchargement de la police, et il se place dans la règle @font-face :

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

Le sens des valeurs en pratique :

• swap : après une très courte période de blocage, la police de secours s'affiche immédiatement et est remplacée dès l'arrivée de la police personnalisée. FOUT classique — le texte n'est jamais invisible.
• block : le texte attend invisible pendant un court instant (environ 3 s), puis bascule vers la police de secours. Risque de FOIT élevé.
• fallback : très court blocage plus une courte fenêtre de remplacement. Si la police arrive tard, elle reste sur le secours ; un bon équilibre pour les logos et la typographie de marque.
• optional : le navigateur décide lui-même d'utiliser ou non la police selon la vitesse de connexion. Il minimise le décalage de mise en page (CLS) et convient idéalement au corps de texte.

Pour la plupart des sites de contenu, swap ou optional sont les choix les plus sûrs.

Prioriser les polices critiques avec preload

Le navigateur ne découvre une police qu'après avoir téléchargé le CSS et trouvé un élément qui l'utilise, ce qui retarde son démarrage. Avec <link rel="preload">, vous pouvez lancer tôt le téléchargement de votre police la plus critique :

<link rel="preload" href="/fonts/inter-var.woff2"
      as="font" type="font/woff2" crossorigin>

Deux détails comptent. L'attribut crossorigin est obligatoire pour les polices (même servies depuis la même origine), sinon le navigateur télécharge la police deux fois. Ensuite, ne préchargez que les une ou deux polices réellement utilisées au-dessus de la ligne de flottaison — précharger chaque graisse gaspille la bande passante et retarde les autres ressources.

Réduire la taille des fichiers avec WOFF2 et le subsetting

Le choix du format est l'un des plus grands gains. WOFF2 est aujourd'hui pris en charge par tous les navigateurs modernes et compresse environ 30 % mieux que WOFF. Inutile de servir les anciens TTF/OTF ou WOFF — WOFF2 seul suffit.

Le deuxième grand gain est le subsetting : ne conserver que les caractères dont vous avez réellement besoin. Une police complète peut contenir des milliers de glyphes, et un site uniquement latin n'en dessine jamais la plupart. Avec unicode-range, vous indiquez au navigateur quelle plage se trouve dans quel fichier :

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

Ainsi, le navigateur ne télécharge jamais le fichier si aucun caractère de cette plage n'apparaît sur la page. Vous pouvez générer les sous-ensembles automatiquement avec glyphhanger ou pyftsubset de fonttools :

pyftsubset inter.ttf \
  --unicodes="U+0000-00FF,U+0131,U+0152-0153" \
  --flavor=woff2 \
  --output-file=inter-latin.woff2

Éviter le décalage de mise en page (CLS)

Le plus agaçant dans le FOUT est le saut causé par les largeurs différentes entre la police de secours et la police personnalisée. Le CSS moderne résout cela en grande partie. Avec size-adjust, ascent-override et descent-override, vous pouvez rapprocher une police de secours des métriques de votre police personnalisée :

@font-face {
  font-family: "Inter-fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
}

Si vous écrivez ensuite font-family: "Inter", "Inter-fallback", sans-serif;, il n'y a presque aucun décalage à l'arrivée de la police personnalisée. Plutôt que de calculer ces métriques à la main, des outils comme Fontaine peuvent les générer pour vous.

Liste de contrôle

• Servez uniquement du WOFF2 ; abandonnez les anciens formats.
• Chargez seulement les graisses et styles réellement utilisés, écartez le reste.
• Sous-ensemblez le texte latin et découpez-le avec unicode-range.
• Préchargez les une ou deux polices au-dessus de la ligne de flottaison (n'oubliez pas crossorigin).
• Choisissez swap ou optional pour le corps de texte.
• Alignez les métriques de secours avec size-adjust pour ramener le CLS vers zéro.

Questions fréquentes

Faut-il utiliser font-display: swap ou optional ?

Si lire le texte immédiatement est la priorité, utilisez swap ; votre police personnalisée apparaîtra à coup sûr. Si la stabilité de la mise en page et le score CLS comptent davantage, optional est plus sûr, car le navigateur peut ne jamais remplacer la police sur les connexions lentes. Pour la plupart des contenus, optional pour les paragraphes et swap pour les titres est une bonne combinaison.

Google Fonts ou l'auto-hébergement, lequel est plus rapide ?

L'auto-hébergement sur votre propre domaine est généralement plus rapide aujourd'hui. Les navigateurs ne partagent plus le cache tiers entre sites, donc l'ancien avantage de Google Fonts a disparu ; se connecter à un domaine supplémentaire ajoute aussi de la latence DNS et TLS. Télécharger les fichiers WOFF2 et les servir depuis votre serveur avec preload est à la fois plus rapide et plus propre pour la confidentialité.

Les polices variables nuisent-elles aux performances ?

Généralement l'inverse. Un seul fichier de police variable remplace plusieurs graisses que vous téléchargeriez sinon séparément ; si vous utilisez trois ou quatre graisses, la taille totale diminue souvent. Ce n'est que si vous n'utilisez qu'une seule graisse et un seul style qu'un sous-ensemble statique peut être plus petit.

Vos polices ralentissent-elles votre page ou provoquent-elles des sauts de texte ? Revoyons ensemble les performances de chargement et la typographie de votre site. Contactez-moi.