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 provoque un flash de texte invisible (FOIT).

Échec de l'audit d'affichage de la police Lighthouse

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

Capture d'écran de Lighthouse pour garantir que le texte reste visible pendant l'audit des chargements de polices Web

Comment é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"
/>

Comment éviter les décalages 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 ont le même impact sur le CLS lorsque la police personnalisée remplace la police système temporaire.

L'impact du CLS du chargement des polices peut être atténué en utilisant des préchargements conjointement avec font-display: optional. Cependant, une utilisation excessive de 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 aux piles

Drupal

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

Magento

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

Ressources