La police utilisée pour le texte dans le cadre suivant met 5 secondes à être téléchargée :
Le texte est invisible pendant 3 secondes, puis le navigateur estime que la police met trop de temps à arriver et affiche donc le texte avec la police suivante dans la liste (ici Arial). Il applique finalement la police voulue dès qu'elle est téléchargée. Note : Firefox met la police en cache (contrairement à ce qui est demandé dans l'en-tête HTTP de la police…), il faut donc utiliser le rafraîchissement forcé (control-shift-R) pour voir la démo une deuxième fois.
La durée de 3 secondes peut dépendre du navigateur (la valeur n'est a priori pas fixée par une norme), l'idée semblant être qu'un flash de texte non stylé (FOUT) est plus grave que risquer de faire attendre l'internaute 3 secondes avant de pouvoir lire la page. Si vous n'êtes pas d'accord, la seule solution actuellement est d'utiliser du JavaScript. (À l'avenir, possibilité de contrôler ça en CSS, pas encore supporté partout.)
Mise à jour depuis le futur : la propriété font-display marche désormais sur les principaux navigateurs. Démo de ses valeurs possibles :
auto : block : swap : fallback : optional :