Fallback font
F
Definition complete
Une fallback font (police de substitution) est une police alternative definie en CSS qui s'affiche automatiquement si la police principale ne peut pas etre chargee ou ne contient pas les caracteres necessaires. Les fallbacks garantissent un rendu textuel coherent quelles que soient les conditions.
En CSS, les fallbacks sont declares dans la propriete font-family apres la police principale, separees par des virgules : font-family: "Poppins", "Helvetica Neue", Arial, sans-serif. Le navigateur parcourt la liste et utilise la premiere police disponible.
Les bonnes pratiques recommandent : une police systeme similaire a la police principale (memes proportions), une famille generique en dernier (serif, sans-serif, monospace), et le preload de la police principale pour minimiser le Flash of Unstyled Text (FOUT). Les outils comme font-style-matcher aident a trouver des fallbacks visuellement proches.
Avec la propriete font-display: swap, le texte s'affiche immediatement en police fallback puis bascule vers la police principale une fois chargee. Cette approche ameliore le Largest Contentful Paint (LCP) tout en offrant la typographie souhaitee.
Exemples pratiques
- Site corporate : font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif; - Roboto pour le branding, systeme fonts en backup.
- Blog elegant : font-family: "Merriweather", Georgia, "Times New Roman", serif; - Merriweather idealement, Georgia en fallback pour un rendu serif coherent.
- Code/terminal : font-family: "Fira Code", "JetBrains Mono", "Courier New", monospace; - polices a chasse fixe pour le code.
A quoi sert Fallback font ?
Les fallback fonts sont essentielles pour la compatibilite navigateur, la performance de chargement (affichage immediat du texte), l'accessibilite (garantir la lisibilite), et la resilience (si le CDN de fonts est indisponible).
Fallback font en pratique chez 123web
Chez 123web, nous definissons systematiquement des font stacks optimisees pour chaque projet. Nous selectionnons des fallbacks visuellement proches de la police de marque pour minimiser le saut de layout au chargement et garantir une experience coherente.