Propriété CSS font-display

Le descripteur CSS font-display contrôle le comportement d'une police web personnalisée pendant son téléchargement : si le navigateur affiche immédiatement le texte de remplacement, masque le texte jusqu'à l'arrivée de la police, ou abandonne complètement le chargement de la police. C'est un descripteur utilisé à l'intérieur de la règle @font-face — et non une propriété normale que l'on applique à un élément.

Cette page explique le problème de chargement que font-display résout, présente chacune de ses cinq valeurs et donne des conseils pratiques sur le choix à faire.

Pourquoi font-display existe

À l'origine, le web était limité à un petit nombre de polices « web-safe » installées sur la machine de l'utilisateur. La règle @font-face a changé cela : vous pouvez fournir vos propres fichiers de polices et indiquer au navigateur où les télécharger. Cependant, les fichiers de polices peuvent être volumineux et le téléchargement prend du temps. Pendant ce délai, le navigateur doit décider quoi afficher pour tout texte utilisant cette police. Deux comportements s'opposent :

FOIT — flash of invisible text. Le navigateur masque le texte jusqu'à ce que la police personnalisée ait fini de se télécharger. Sur une connexion lente, l'utilisateur peut fixer une page blanche pendant plusieurs secondes. C'est le comportement par défaut dans la plupart des navigateurs.
FOUT — flash of unstyled text. Le navigateur affiche immédiatement le texte avec une police de remplacement, puis le restitue une fois la police personnalisée chargée. Le contenu est lisible instantanément, mais un « saut » visible se produit lors de l'échange.

Aucun des deux n'est universellement meilleur, donc font-display vous permet d'indiquer au navigateur le compromis que vous préférez.

Les trois périodes de font-display

Chaque valeur est définie en termes de trois périodes sur une chronologie qui commence lorsque la police commence à se charger :

Période de blocage — le texte est rendu de manière invisible (il occupe quand même de l'espace). Si la police se charge durant cette période, elle est utilisée. Si la période se termine en premier, le navigateur bascule vers une police système.
Période d'échange — le texte est affiché avec une police de remplacement, mais le navigateur effectuera l'échange vers la police personnalisée dès qu'elle aura fini de se charger.
Période d'échec — le navigateur considère le chargement de la police comme échoué et conserve la police de remplacement, même si la police arrive ultérieurement.

Chaque valeur détermine simplement la durée des périodes de blocage et d'échange.

Valeur initiale	auto
S'applique à	La règle `@font-face`.
Héritage	Non.
Animatable	Non.
Version	CSS Fonts Module Level 4
Syntaxe DOM	object.style.fontDisplay = "swap";

Syntaxe

font-display: auto | block | swap | fallback | optional;

Comme font-display est un descripteur, il se place à l'intérieur d'un bloc @font-face aux côtés de font-family et src :

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap; /* show fallback text immediately, then swap in the font */
}

Vous utilisez ensuite la police normalement. Le descripteur est lu automatiquement lors du chargement de la police :

body {
  font-family: 'MyWebFont', Arial, sans-serif;
}

Valeurs

Valeur	Période de blocage	Période d'échange	Ce que voit l'utilisateur
`auto`	par défaut du navigateur	par défaut du navigateur	Ce que le navigateur préfère — se comporte généralement comme `block`.
`block`	courte (~3 s)	infinie	Texte invisible d'abord, puis la police dès qu'elle arrive (tendance FOIT).
`swap`	nulle / infime	infinie	Texte de remplacement instantané, remplacé par la police personnalisée au chargement (FOUT).
`fallback`	très courte (~100 ms)	courte (~3 s)	Bref texte invisible, puis remplacement ; la police n'est utilisée que si elle se charge rapidement.
`optional`	très courte (~100 ms)	nulle	Remplacement si la police n'est pas encore en cache ; aucun échange avec décalage de mise en page.

Les durées exactes des périodes ne sont pas fixées par la spécification — chaque navigateur choisit les siennes. Les valeurs ci-dessus sont les valeurs par défaut courantes utilisées par Chrome et Firefox.

Quelle valeur choisir ?

swap est le choix le plus répandu pour le texte courant. Le contenu est immédiatement lisible, ce qui est excellent pour l'accessibilité et la performance perçue. L'inconvénient est un recalcul visible de la mise en page lors de l'échange de police.
optional est le meilleur choix lorsque l'évitement du décalage de mise en page prime sur la garantie d'apparition de la police. Le navigateur n'utilise la police personnalisée que si elle peut se charger presque instantanément (généralement depuis le cache) ; sinon il conserve la police de remplacement sans jamais effectuer l'échange. Cela maintient votre score de Cumulative Layout Shift faible.
fallback est un compromis : une courte fenêtre de texte invisible, puis le remplacement, avec une brève chance d'échange. Idéal pour les polices agréables mais non critiques.
block convient aux polices d'icônes ou à l'identité visuelle où le mauvais glyphe (par exemple un caractère de remplacement au lieu d'une icône) paraîtrait cassé — mieux vaut ne rien afficher que la mauvaise chose.
auto laisse la décision au navigateur et ne vous donne aucun contrôle, c'est donc rarement un choix délibéré.

font-display est un descripteur, pas une propriété, donc les mots-clés initial et inherit ne s'y appliquent pas comme pour les propriétés CSS ordinaires.

Compatibilité des navigateurs

font-display est pris en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari et Opera). Dans les navigateurs qui ne reconnaissent pas un mot-clé donné, le descripteur est simplement ignoré et le comportement de chargement par défaut du navigateur s'applique, ce qui permet de l'utiliser sans solution de repli.

Propriétés associées

@font-face — la règle qui définit une police personnalisée et dans laquelle font-display est utilisé.
font-family — définit la police (incluant votre pile de remplacement) utilisée par un élément.
font-weight — contrôle l'épaisseur du texte.
font — la propriété abrégée pour plusieurs propriétés de police à la fois.

Pratique

Quelles sont les valeurs possibles pour la propriété CSS 'font-display' ?