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

Les polices sont souvent des fichiers volumineux qui se chargent lentement. Certains navigateurs masquent le texte jusqu'à ce que la police se charge, ce qui provoque un flash de texte invisible (FOIT).

Échec de l'audit Lighthouse "font-display"

Lighthouse signale toutes les URL de police susceptibles d'afficher du texte invisible :

Capture d'écran de l'audit Lighthouse "S'assurer que le texte reste visible pendant le 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 valeurs font-display suivantes 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

Le remplacement d'un FOIT par un FOUT (flash de texte non stylisé) se produit lorsque vous affichez temporairement une police système. Cela améliore le FCP et le LCP en affichant le contenu plus tôt, mais le FOIT et le FOUT auront le même impact sur le CLS lorsque la police personnalisée remplacera la police système temporaire.

L'impact du chargement des polices sur le CLS peut être atténué à l'aide de préchargements associés à font-display: optional. Cependant, une utilisation excessive des préchargements peut avoir un impact négatif sur les métriques de chargement. Nous vous recommandons d'effectuer des tests A/B pour vous assurer que le préchargement des polices n'entraîne pas de régression des performances.

Conseils spécifiques à la pile

Drupal

Lorsque vous définissez des polices personnalisées dans votre thème, vous pouvez le spécifier avec @font-display.

Magento

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

Ressources