Corriger Ensure text remains visible during webfont load

Assurez-vous que le texte reste visible pendant le chargement des polices Web

Avant l'existence des polices Web, les concepteurs Web étaient limités à un petit nombre de polices préinstallées. Les polices Web vous donnent la liberté d'utiliser n'importe quelle police sur un site Web.

Bien sûr, cela semble intéressant, mais les polices Web ont également leurs inconvénients ; elles ralentissent la vitesse de chargement de la page de plusieurs manières.

Les polices Web sont généralement des fichiers volumineux qui ne sont pas installés sur un ordinateur par défaut. Les polices Web doivent donc être téléchargées avant de pouvoir être utilisées. Pendant le téléchargement d'une police Web, le texte d'une page Web sera temporairement masqué jusqu'à ce que la police Web soit complètement chargée. Cela crée une mauvaise expérience utilisateur ; personne ne veut fixer un écran vide trop longtemps.

Dès que la police Web est chargée et rendue, le navigateur remplace le « texte invisible » par le texte final avec la nouvelle police Web. Ce moment s'appelle le Flash of Invisible Text (FOIT). Ce FOIT est ce qui provoque l'apparition du message d'erreur « Ensure text remains visible during webfont load ».

Vous chargez une police Web sur votre page sans prendre aucune précaution pour empêcher ce Flash of Invisible Text ? Lors de votre analyse PageSpeed sur Lighthouse, le message suivant apparaîtra : « Ensure text remains visible during webfont load ». Cela vous indique combien de temps vous pourriez gagner en rendant le texte visible avant le chargement de la police Web. Pour 1 seule police, cela représente facilement 100 ms.

Pourquoi le texte invisible est-il mauvais pour la vitesse de la page ?

Le texte invisible ne ralentira pas vraiment le temps de chargement final mesuré d'une page. Alors pourquoi Lighthouse pense-t-il que c'est un tel problème ?

Google estime qu'il est important qu'une page Web offre la meilleure expérience utilisateur possible. L'expérience utilisateur (UX) peut être améliorée en affichant le contenu de la page le plus rapidement possible. Le texte invisible affecte directement votre First Contentful Paint (FCP) car le navigateur ne peut pas peindre le texte qu'il masque. Si le texte est votre élément de Largest Contentful Paint (LCP), le FOIT retarde également cette métrique. Comparez les deux versions en pellicule de notre page d'accueil ci-dessous :

Flash of Invisible Text

Aucun flash de texte invisible avec display:swap

Comme vous pouvez le constater, le chargement des deux pages s'est terminé exactement en même temps. Pourtant, la dernière version du site Web a l'air beaucoup mieux pour les visiteurs. Les visiteurs peuvent commencer à lire immédiatement.

C'est pourquoi il est judicieux d'afficher quand même le texte, non pas dans la police finale, mais dans une police « fallback » (de secours). De cette façon, le visiteur pense que votre page se charge vraiment très vite.

Un bref rappel : FOIT et FOUT

Avant d'aller plus loin, il est utile de distinguer les concepts suivants : FOIT et FOUT. FOIT signifie Flash of Invisible Text et se produit lorsque les polices Web ne sont pas visibles pendant le chargement. Vous pouvez atténuer ce problème en incluant une police de secours. Lorsque la police de secours est remplacée par la police Web, on l'appelle FOUT, Flash of Unstyled Text.

Rendre les polices Web visibles pendant le chargement

Il existe deux façons de rendre les polices Web visibles pendant le chargement : la première se fait via la valeur CSS font-display ; la seconde consiste à utiliser une police fallback via une classe. Les deux méthodes présentent des avantages et des inconvénients, que j'aborderai ci-dessous.

Méthode 1 : Font-display:swap

Font-display est un descripteur CSS disponible sur tous les navigateurs modernes. Le descripteur font-display détermine la façon dont une police est affichée selon si et quand elle a été téléchargée. Font-display est utilisé dans une règle @font-face.

Il y a quatre valeurs font-display que vous devez connaître :

• swap : Affiche immédiatement la police de secours, puis bascule vers la police Web lorsqu'elle se charge. La fenêtre d'échange est infinie, de sorte que la police Web finit toujours par remplacer la police de secours. Idéal pour les polices de marque et les titres.
• optional : Affiche immédiatement la police de secours. Le navigateur décide de procéder ou non à l'échange en fonction de la vitesse de connexion. L'absence d'échange signifie un Cumulative Layout Shift nul. Idéal pour le texte du corps où la performance est la priorité.
• fallback : Affiche immédiatement la police de secours, puis donne à la police Web une courte fenêtre (environ 3 secondes) pour se charger. Si elle manque la fenêtre, la police de secours reste. Un juste milieu entre swap et optional.
• block : Masque le texte jusqu'à 3 secondes pendant le chargement de la police. C'est la cause du FOIT. Ne l'utilisez pas à moins d'avoir une raison spécifique (comme les polices d'icônes).

Selon l'Almanach Web 2025, seulement 50 % des sites utilisent font-display: swap, tandis que 25 % utilisent encore block. Cela signifie qu'un quart du Web affiche encore du texte invisible pendant le chargement des polices.

Utilisez la valeur swap pour éviter le FOIT et faire apparaître le texte à l'écran aussi vite que possible. Une fois que nous définissons la valeur font-display: swap dans la règle @font-face, les polices par défaut du système sont utilisées pendant le chargement de la page jusqu'à ce que les polices Web aient été chargées. Cela aide le visiteur à lire le texte sur la page immédiatement.

Google Fonts

Lorsque vous utilisez Google Fonts, vous pouvez utiliser la méthode font-display: swap avec un simple « &display=swap » dans la feuille de style ou le code d'intégration.

<!-- via une feuille de style externe -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!-- via la méthode d'importation (plus lent, non recommandé) -->
<style>
 @import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
</style>

La méthode @import bloque le rendu et force le navigateur à télécharger les feuilles de style de manière séquentielle. La méthode <link> est plus rapide car le navigateur peut découvrir la feuille de style de la police plus tôt dans le processus d'analyse.

Mais nous ne sommes fans d'aucune des deux approches. Il est presque toujours beaucoup plus rapide d'héberger les polices Web vous-même. Cela vous donne plus de contrôle sur le processus de « préchargement » des polices. Vous pouvez utiliser la connexion HTTP/2 déjà existante et vous n'avez pas besoin de télécharger une feuille de style supplémentaire.

Polices locales

@font-face {
 font-family: "Open Sans";
 font-weight: 400;
 font-style: normal;
 src: url("OpenSans400.woff2") format("woff2");
 font-display: swap
}

WOFF2 est tout ce dont vous avez besoin. Il est pris en charge dans tous les navigateurs modernes et offre la meilleure compression. Selon l'Almanach Web 2025, 72 % des sites auto-hébergent désormais leurs polices, et WOFF2 représente 65 % de toutes les requêtes de polices Web. Il n'y a plus aucune raison d'inclure WOFF ou TTF comme formats de secours.

Empêcher le décalage de mise en page lors du changement de polices

Il y a un hic avec font-display: swap. Lorsque le navigateur passe de la police de secours à la police Web, la taille du texte change souvent. Différentes polices ont des largeurs de caractères, des hauteurs d'ascendante et des interlignes différents. Ce changement de taille provoque un Cumulative Layout Shift (CLS), qui est un Core Web Vital.

La solution est le descripteur CSS size-adjust. Il met à l'échelle la police de secours pour qu'elle corresponde aux dimensions de votre police Web, de sorte que l'échange provoque un décalage visible faible ou nul. La prise en charge des navigateurs est supérieure à 93 %, y compris Safari 17+.

/* Définir une police de secours correspondante */
@font-face {
 font-family: "Open Sans Fallback";
 src: local("Arial");
 size-adjust: 105%;
 ascent-override: 110%;
 descent-override: 25%;
 line-gap-override: 0%;
}

/* Utilisez les deux dans votre pile de polices */
body {
 font-family: "Open Sans", "Open Sans Fallback", sans-serif;
}

Les descripteurs ascent-override, descent-override et line-gap-override donnent un contrôle encore plus précis sur les métriques verticales. Ils fonctionnent dans Chrome, Firefox et Edge, mais pas encore dans Safari, alors traitez-les comme une amélioration progressive. La propriété size-adjust à elle seule fait déjà une différence notable.

Sur les sites surveillés par CoreDash, les pages qui combinent font-display: swap avec des remplacements de métriques de police ont 75 % moins de CLS lié aux polices que les pages utilisant le swap seul.

Méthode 2 : Polices avec une classe

La deuxième façon de rendre les polices visibles pendant le chargement consiste à travailler avec des classes. Ces classes sont généralement (mais pas toujours) ajoutées à l'élément <body> ou <html>.

L'avantage de cette méthode est que vous avez plus de contrôle sur la police de secours et sur le timing du Flash of Unstyled Text.

Cette méthode fonctionne comme suit : Indiquez dans votre feuille de style qu'une page doit initialement être rendue avec une police (la police de secours). Vous chargez ensuite la police Web via l'API JavaScript FontFace ou via le préchargement. Une fois cette police chargée, ajoutez une classe à votre page. La classe s'assure que la police Web est activée.

Pourquoi feriez-vous cela, pourriez-vous demander ? Vous faites cela pour obtenir plus de contrôle sur la police fallback. Vous pouvez afficher la police de secours avec un interligne plus grand ou une taille différente pour qu'elle corresponde mieux à la police Web. Cela évite les décalages de mise en page.

Lorsque vous utilisez plusieurs polices Web, vous pouvez utiliser la méthode de l'API FontFace pour changer toutes les polices à la fois. Cela permet d'économiser de nombreux rafraîchissements (repaints) du navigateur. Personnellement, je ne suis pas fan de cette méthode ; cela garantit que le FOUT a lieu après le chargement de la dernière police. C'est donc toujours plus tard que nécessaire.

Police avec une classe via l'API FontFace :

<style>
  // police de secours avec un font-size de .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }

  // police web avec un font-size de 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }
</style>

<script>
var font = new FontFace("webfont", "url(/font.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

// n'attendez pas l'arborescence de rendu, initiez une récupération immédiate !
font.load().then(function() {
  document.fonts.add(font);
  document.documentElement.classList.add("fl")
});
</script>

Via un lien preload

La deuxième méthode se fait via un lien de préchargement (preload). Préchargez la police comme décrit ci-dessous. Une fois cela fait, changez la classe de l'élément <html>.

<link
  rel="preload"
  href="/webfont.woff2"
  as="font"
  type="font/woff2" crossorigin
  onload="document.documentElement.classList.add('fl')">

<style>
  // police de secours avec un font-size de .9rem
  html{
    font-family: sans-serif;
    font-size:.9rem;
  }

  // police web avec un font-size de 1rem
  html.fl{
    font-family: 'webfont';
    font-size:1rem;
  }

  // @font-face, uniquement activé une fois que la classe .fl est ajoutée à la balise html
  @font-face{
    font-family:'Open Sans';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src: url(/webfont.woff2) format("woff2");
    unicode-range:U+000-00FF;
  }
</style>

Trucs et astuces supplémentaires

1. Préchargez toujours les polices visibles. Les polices ne sont pas téléchargées par défaut tant qu'elles ne sont pas réellement utilisées sur une page. Si vous avez besoin d'une police Web, préchargez-la pour qu'elle soit disponible plus tôt.
2. Vous voulez éviter complètement le FOIT et le FOUT ? Utilisez font-display: optional en combinaison avec le préchargement.
3. Héberger vous-même les polices Web est toujours plus rapide que les polices Web via Google Fonts ou un autre CDN externe.

Vous voulez vérifier que votre stratégie de chargement des polices améliore réellement l'expérience utilisateur réelle ? Utilisez le Real User Monitoring pour suivre votre FCP et votre CLS avant et après avoir apporté des modifications.