Font display swap
F
Definition complete
La valeur font-display: swap en CSS controle le comportement d'affichage du texte pendant le chargement des polices web personnalisees. Avec swap, le texte s'affiche immediatement dans une police systeme de substitution, puis bascule vers la police personnalisee une fois chargee.
Cette approche resout le probleme du FOIT (Flash of Invisible Text) ou le texte reste invisible tant que la police n'est pas chargee - frustrant pour l'utilisateur et penalisant pour les metriques de performance comme le LCP. Le swap garantit un contenu lisible immediatement.
Le compromis du swap est le FOUT (Flash of Unstyled Text) : le texte change d'apparence quand la police bascule, pouvant causer un saut de layout (CLS) si les polices ont des metriques differentes. Choisir des fallback fonts aux proportions similaires minimise ce probleme.
Les autres valeurs de font-display : auto (comportement par defaut du navigateur), block (FOIT court puis swap), fallback (swap rapide, police custom ignoree si trop lente), et optional (police custom utilisee seulement si deja en cache, ideal pour les connexions lentes).
Exemples pratiques
- Implementation : @font-face { font-family: "Poppins"; src: url("poppins.woff2"); font-display: swap; }
- Google Fonts : Ajouter &display=swap a l'URL : fonts.googleapis.com/css2?family=Poppins&display=swap
- Optimisation CLS : Combiner swap avec des fallback fonts aux metriques similaires pour minimiser le saut de layout.
A quoi sert Font display swap ?
font-display: swap est recommande pour la plupart des sites : il ameliore le FCP et LCP en affichant le texte immediatement, tout en permettant d'utiliser des polices personnalisees. C'est un quick win d'optimisation performance.
Font display swap en pratique chez 123web
Chez 123web, nous configurons systematiquement font-display: swap sur les polices web de nos projets. Nous selectionnons des polices fallback aux metriques proches pour minimiser le CLS et garantir une experience de chargement fluide.