Comment corriger le décalage de mise en page des polices

Que se passe-t-il ?

Il existe deux effets courants. Avec un flash de texte invisible (FOIT), le texte reste vide tant que la police n’est pas arrivée. Avec un flash de texte sans style (FOUT), une police de secours s’affiche d’abord, puis est remplacée. Si les deux polices n’ont pas la même taille, les lignes sont recalculées et le contenu se déplace. Ce déplacement compte dans le Cumulative Layout Shift (CLS), l’un des Core Web Vitals de Google.

Choisir une valeur font-display

• swap affiche le texte immédiatement et le remplace dès que la police est prête. C’est le choix le plus courant, mais il peut provoquer un décalage.
• optional n’utilise votre police que si elle arrive très rapidement. Cela évite un remplacement tardif, ce qui convient au texte courant sur les sites où la vitesse est prioritaire.
• fallback est un compromis entre les deux, avec un court délai d’attente et un temps limité pour effectuer le remplacement.

Adapter votre police de secours

C’est la correction la plus efficace. Vous créez une police de secours qui utilise une police système, redimensionnée pour occuper à peu près le même espace que votre webfont. Lors du remplacement, très peu d’éléments bougent :

@font-face {
  font-family: "Brand Sans Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 96%;
  descent-override: 28%;
  line-gap-override: 0%;
}

body {
  font-family: "Brand Sans", "Brand Sans Fallback", sans-serif;
}

Vous n’avez pas besoin de calculer ces valeurs vous-même. Dans le Générateur de webfonts, ouvrez CSS, choisissez une Police de secours assortie, et l’outil mesure votre police et écrit la règle.

Autres solutions utiles

• Précharger votre police principale, pour qu’elle arrive avant le premier affichage lorsque c’est possible.
• Gardez des fichiers de police légers, comme expliqué dans notre guide sur les webfonts plus rapides.
• Évitez les sources multiples. Servir les polices depuis votre propre domaine supprime une connexion supplémentaire.

Vérifier votre score

Lancez le Test de vitesse de page et regardez le CLS. Un bon score est de 0,1 ou moins. Pour observer le remplacement vous-même, limitez votre connexion dans les outils de développement de votre navigateur, puis rechargez la page.