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

Les polices sont souvent des fichiers volumineux dont le chargement est lent. Certains navigateurs masquent le texte jusqu'à ce que la police se charge, ce qui entraîne un flash de texte invisible (FOIT).

Pourquoi l'audit de l'affichage des polices Lighthouse échoue-t-il ?

Lighthouse signale toutes les URL de polices susceptibles de clignoter du texte invisible :

Capture d'écran de Lighthouse S'assurer que le texte reste visible pendant l'audit du chargement des polices Web

Éviter d'afficher du texte invisible

L'API font-display indique comment une police s'affiche lorsqu'elle est utilisée dans un style font-face. Les éléments suivants : Les valeurs font-display indiquent au navigateur d'utiliser une police système si la police personnalisée n'est pas prête:

  • swap
  • optional
  • fallback

Exemple de CSS

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'),
    url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
      format('woff2');
  font-display: swap;
}

Exemple Google Fonts

Ajoutez le paramètre &display=swap/&display=optional/&display=fallback à la fin de votre URL Google Fonts:

<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
  rel="stylesheet"
/>

Éviter les changements de mise en page causés par les polices différées

L'affichage temporaire d'une police système remplace un FOIT par un flash de texte sans style (FOUT). Cela améliore le FCP&LCP en affichant le contenu plus tôt, mais FOIT et FOUT auront le même impact sur le CLS lorsque la police personnalisée remplace la police système temporaire.

L'impact CLS du chargement des polices peut être atténué en utilisant des préchargements associés à font-display: optional. Toutefois, la surutilisation des préchargements peut avoir un impact négatif sur les métriques de charge. Nous vous recommandons d'effectuer des tests A/B pour vous assurer que le préchargement des polices n'entraîne aucune régression des performances.

Conseils spécifiques à la pile

Drupal

Spécifiez @font-display lorsque vous définissez des polices personnalisées dans votre thème.

Magento

Indiquez @font-display lorsque vous définissez des polices personnalisées.

Ressources