font-display: swap indique au navigateur d’afficher le texte tout de suite dans une police de secours, puis de remplacer par la police web dès qu’elle arrive. Cela supprime l’attente du texte invisible, mais pas le décalage de mise en page : si la police web est plus large ou plus haute que la police de secours, le texte se remet en page au moment du remplacement. Pour avoir à la fois un texte rapide et une mise en page stable, utilisez swap, chargez la police tôt et adaptez la taille de la police de secours à la police web avec size-adjust. Les sections ci-dessous comparent les cinq valeurs de font-display et donnent le code de chaque étape.
Ce que fait font-display swap
swap donne à la face de police « une période de blocage extrêmement courte et une période de remplacement infinie » (MDN, dernière modification le 10 septembre 2026). Concrètement, le texte n’est jamais masqué longtemps, et la police web est utilisée dès qu’elle finit de charger, même une minute plus tard.
MDN définit ainsi les deux périodes. Pendant la période de blocage, un élément qui utilise une police non chargée doit afficher une police de secours invisible. Pendant la période de remplacement, il affiche une police de secours visible, et une police chargée à temps est utilisée normalement. Les noms courants sont FOIT (flash of invisible text, la période de blocage) et FOUT (flash of unstyled text, le remplacement).
Sans font-display, c’est le navigateur qui décide. Le guide des polices de web.dev (octobre 2022) indique que les navigateurs basés sur Chromium et Firefox bloquent l’affichage du texte jusqu’à 3 secondes si la police n’est pas chargée, et que Safari le bloque indéfiniment (web.dev). Considérez cela comme le comportement de ces versions, et vérifiez les navigateurs que vous prenez en charge.
font-display est Baseline nouvellement disponible depuis janvier 2020 et largement disponible depuis juillet 2022 ; web-features le liste à partir de Chrome 60, Firefox 58, Safari 11.1 et Safari iOS 11.3 (web-features 3.44.0, 22 octobre 2026).
@font-face {
font-family: "Brand";
src: url("/fonts/brand.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}Comparaison des valeurs de font-display
Les cinq valeurs ne diffèrent que par la durée pendant laquelle le texte reste invisible et pendant laquelle une police tardive peut encore être remplacée. Périodes du tableau de web.dev :
| Valeur | Période de blocage | Période de remplacement | À utiliser pour |
|---|---|---|---|
auto |
Décidée par le navigateur | Décidée par le navigateur | Aucun choix explicite (la valeur par défaut) |
block |
2 à 3 secondes | Infinie | Rarement : le texte reste masqué pendant le chargement de la police |
swap |
0 ms | Infinie | Titres et textes de marque qui doivent utiliser la police web |
fallback |
100 ms | 3 secondes | Un compromis : très courte période de blocage, courte période de remplacement |
optional |
100 ms | Aucune | Texte courant, quand une mise en page stable compte plus que la police exacte |
Web.dev recommande swap quand le texte doit s’afficher vite dans la police web, à condition que la police soit livrée assez tôt pour ne pas provoquer de décalage. Son choix le plus performant est optional, avec le compromis que la police web ne sera pas utilisée si elle arrive tard. Il suggère swap pour la marque et les éléments distinctifs, et optional pour le texte courant (web.dev). Cette répartition est une recommandation ; aucune spécification ne l’impose.
Lighthouse vérifie aussi ce point. Son insight Font display (octobre 2025) demande de régler font-display sur swap ou optional pour que le texte reste visible, et pour swap il renvoie vers les surcharges de métriques de police pour réduire le décalage de mise en page (Chrome for Developers).
Précharger la police qui compte
Le préchargement lance le téléchargement de la police plus tôt, ce qui réduit le temps passé sur la police de secours. Un préchargement pour une police hébergée soi-même exige as="font", le type MIME et crossorigin :
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>MDN indique que crossorigin est obligatoire pour le préchargement des polices et qu’il doit correspondre au mode CORS de la requête « même lorsque la requête n’est pas inter-origine », car les polices sont récupérées en mode CORS anonyme (MDN, mai 2026).
Ne préchargez que ce dont le premier écran a besoin. Web.dev met en garde : le préchargement ignore les déclarations unicode-range, et, utilisé avec prudence, il ne doit charger qu’un seul format de police. Pour les polices pas nécessaires tout de suite, passez-le. Le préchargement est Baseline nouvellement disponible depuis janvier 2021 et largement disponible depuis juillet 2023 (web-features 3.44.0).
Google Fonts ou hébergement propre
Pour Google Fonts, ajoutez le paramètre display à l’URL de la feuille de style et connectez-vous tôt aux deux origines de polices :
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap" rel="stylesheet">Le paramètre display accepte les mêmes cinq valeurs, et la documentation de Google indique que la valeur par défaut est auto et qu’une autre valeur convient en général mieux (Google Fonts, mise à jour de juillet 2024). Les fichiers de police ont besoin de crossorigin sur leur preconnect, car « contrairement aux feuilles de style, les fichiers de police doivent être envoyés sur une connexion CORS » (web.dev).
Lequel est le plus rapide, Google Fonts ou l’hébergement propre ? Web.dev dit que la différence est « moins nette » qu’il n’y paraît : dans les données du Web Almanac qu’il cite, les polices tierces s’affichaient plus vite que les polices propres, et l’hébergement propre gagne plus souvent avec un CDN et HTTP/2. Si vous hébergez vous-même, vous gérez les optimisations : servez du WOFF2 (web.dev indique qu’il se compresse 30 % mieux que WOFF), sous-ensemblez avec unicode-range, et vérifiez d’abord la licence de la police.
Éviter le décalage avec une police de secours
Le décalage au remplacement vient de métriques différentes entre la police de secours et la police web, et le correctif consiste à ajuster la police de secours pour qu’elle corresponde. Le guide CLS de web.dev cite « les polices qui s’affichent plus grandes ou plus petites que leur secours initial » comme cause de décalage de mise en page, et une bonne valeur de CLS est de 0,1 ou moins (web.dev, avril 2023). Pour toutes les causes, voir le guide du cumulative layout shift.
L’outil est un second @font-face qui pointe vers une police locale et la redimensionne. size-adjust met à l’échelle les contours des glyphes et leurs métriques d’un pourcentage, et ascent-override, descent-override et line-gap-override règlent la boîte de ligne :
@font-face {
font-family: "Poppins fallback";
src: local("Arial");
size-adjust: 60.85%;
}
body {
font-family: "Poppins", "Poppins fallback", sans-serif;
}Le 60,85 % concerne une paire de polices, Poppins sur Arial : il faut calculer le vôtre. L’article de Chrome indique que size-adjust est la largeur moyenne des caractères de la police web divisée par celle de la police de secours (538,01 / 884,14 = 60,85 % ici), que dans la plupart des cas on ne peut que l’approcher, et que les trois descripteurs de surcharge se calculent à partir de l’ascendante, de la descendante et de l’interligne de la police web, divisées par les unités par em et la valeur de size-adjust. Calculez-les pour votre police avec l’un des outils cités par l’article (mis à jour en février 2023) : Fontaine, Capsize, next/font (depuis Next 13) ou @nuxtjs/fontaine (Chrome for Developers), et vérifiez le résultat dans le navigateur avant de vous y fier.
La prise en charge varie selon le descripteur, d’après MDN browser-compat-data 8.1.7 (octobre 2026) :
| Descripteur | Chrome | Firefox | Safari |
|---|---|---|---|
size-adjust |
92 | 92 | 17 |
ascent-override, descent-override, line-gap-override |
87 | 89 | non pris en charge |
Web-features ne classe pas les trois surcharges comme Baseline : Safari sur iPhone les ignore donc et peut encore se décaler un peu. La police de secours change aussi selon l’appareil : l’article de Chrome note qu’une police de secours Roboto sur Android demande des valeurs différentes de celles d’Arial.
L’effet sur le texte LCP sur téléphone
Les polices web peuvent retarder Largest Contentful Paint quand l’élément le plus grand est du texte. Le guide LCP de web.dev indique que le texte n’est compté comme rendu qu’après la période de blocage ; un élément plus petit peut donc être signalé comme LCP jusqu’à ce que le texte en police web apparaisse. Il retient comme candidats LCP les éléments de texte de niveau bloc comme <p> et <h1>, et une bonne valeur de LCP est de 2,5 secondes ou moins (web.dev, septembre 2025).
Pour une page dont le LCP est un titre en police web, le téléchargement de la police se dispute avec tout le reste sur une connexion mobile lente, ce qui rend swap ou un préchargement utile. La façon de lire l’élément LCP est dans le guide d’audit mobile avec Lighthouse, et les autres causes d’un LCP lent dans le guide de test de vitesse mobile.
Vérifiez le résultat sur une page à la taille d’un téléphone
Après la modification, regardez la page au premier chargement à froid. Rechargez avec le cache désactivé à des largeurs de téléphone et observez si le titre saute quand la police arrive. Mobile View Extension recharge l’onglet avec le user agent, la taille d’écran et le ratio de pixels d’un téléphone : vous voyez donc la mise en page mobile et la police de secours qui apparaît. Il ne mesure ni le temps de chargement, ni le décalage de mise en page, ni aucune métrique de vitesse, et il utilise les polices et la connexion de votre ordinateur ; la police de secours d’un téléphone peut donc être différente. Mesurez avec Lighthouse et les données terrain.
Questions fréquentes
Que fait font-display swap ?
Il affiche le texte immédiatement dans une police de secours, puis le remplace par la police web quand elle se charge, sans limite de délai pour ce remplacement. La période de blocage est extrêmement courte et la période de remplacement est infinie (MDN).
Vaut-il mieux swap ou optional ?
Aucun n’est meilleur partout : swap finit toujours avec votre police web mais peut décaler la mise en page, alors que optional évite le décalage et peut ignorer la police web lors d’un chargement lent. Web.dev suggère swap pour la marque et optional pour le texte courant.
font-display swap provoque-t-il un décalage de mise en page ?
Il peut. Quand la police de secours et la police web ont des métriques différentes, le remplacement modifie la taille et la hauteur de ligne du texte et peut déplacer le contenu, ce que web.dev range parmi les causes de décalage. Adapter le secours avec size-adjust le réduit.
Faut-il précharger les polices web ?
Préchargez une ou deux polices nécessaires au premier écran, avec as="font" et crossorigin. Web.dev conseille de l’utiliser avec parcimonie, car le préchargement ignore unicode-range.