Générateur de pile de secours de polices
Générez des piles de familles de polices CSS prêtes pour la production avec des solutions de secours multiplateformes appropriées. Choisissez parmi plus de 90 polices Google organisées dans 5 catégories : Sans Serif, Serif, Monospace, Display et Handwriting. Chaque catégorie est livrée avec plusieurs options de pile de secours organisées couvrant les polices système macOS, Windows, Linux, iOS et Android. Prévisualisez votre pile en direct, copiez la déclaration CSS, l'extrait @import ou toute variante de pile, le tout en un seul clic. Entièrement gratuit, aucune inscription requise.
Select a primary font and a fallback category to generate your CSS font-family stack.
Or switch to "Quick Presets" for ready-to-use recommendations.
À propos des piles de secours de polices
- Une pile de familles de polices est une liste de polices séparées par des virgules dans votre CSS. Le navigateur essaie chaque police dans l'ordre : si la police principale n'est pas installée ou ne se charge pas, elle revient à la suivante. Une pile bien conçue garantit que le texte est toujours lisible, même lorsque votre police Web personnalisée n'est pas disponible.
- Cet outil combine la police principale de votre choix (Google Font ou tout nom de police personnalisé) avec des listes de secours du système organisées par catégorie. Chaque catégorie - Sans Serif, Serif, Monospace, Display et Handwriting - propose plusieurs variantes de pile, du plus basique (Arial, Helvetica, sans-serif) au plus complet (polices système Apple, Segoe UI, Roboto, etc.).
- Même avec font-display: swap, il y a un bref instant où la police de secours s'affiche avant le chargement de la police personnalisée. Une bonne pile de secours avec des métriques similaires (hauteur x, largeur, poids) réduit le décalage cumulatif de mise en page (CLS) et offre une expérience de lecture plus fluide. Ceci est essentiel pour Core Web Vitals.
- Faites toujours correspondre la catégorie de secours à votre police principale. Une police principale serif doit recourir aux polices système serif, et non aux polices sans-serif. Les catégories incompatibles provoquent des changements visuels discordants lors du rendu de la solution de secours. Cet outil sélectionne automatiquement la catégorie de la police principale comme catégorie de secours par défaut.
Foire aux questions
Une pile de familles de polices est une liste prioritaire de polices dans votre CSS. Le navigateur tente d'utiliser la première police ; s'il n'est pas disponible ou ne se charge pas, il essaie le suivant. Cela garantit que le texte est toujours affiché dans une police lisible, quel que soit ce que l'utilisateur a installé.
Cet outil génère des piles multiplateformes complètes couvrant macOS, Windows, Linux, iOS, Android et ChromeOS. Les écrire manuellement est sujet aux erreurs : vous pourriez oublier les polices spécifiques à la plate-forme ou utiliser des guillemets incorrects. L'outil garantit que chaque pile est correcte et complète.
Chaque catégorie a plusieurs variantes. La pile 1 (recommandée) est la plus complète : elle couvre tous les principaux systèmes d'exploitation avec des polices natives du système. La pile 2 est plus courte pour la prise en charge des anciens navigateurs. La pile 3 est la solution de secours minimale sécurisée pour le Web. La pile recommandée est la meilleure pour la plupart des projets.
Les noms de police contenant des espaces (comme « Times New Roman ») doivent être mis entre guillemets simples ou doubles. Les mots-clés génériques (serif, sans-serif, monospace, cursive) et les polices système commençant par un tiret (comme -apple-system) ne doivent PAS être cités. L’outil gère correctement les citations.
Oui. Utilisez le sélecteur de polices pour choisir parmi plus de 90 polices Google sélectionnées ou saisissez n'importe quel nom de police personnalisé dans la zone de recherche. L'outil génère la pile pour tout nom de police que vous entrez.
Une pile de secours bien adaptée réduit le décalage cumulatif de mise en page (CLS). Lorsque la police de secours présente des métriques similaires à celles de votre police personnalisée, le texte ne change pas lors du chargement de la police personnalisée. Combiné avec font-display: swap, cela offre le meilleur équilibre entre performances et cohérence visuelle.
Oui. Ajoutez la pile à votre tailwind.config.js sous theme.extend.fontFamily. Par exemple : fontFamily : {titre : ['Playfair Display', 'Georgia', 'serif'] }. Utilisez ensuite la classe utilitaire font-heading dans votre balisage.
Oui, les clients de messagerie prennent en charge très peu de polices. La plupart ne restituent que les polices Web sécurisées telles que Arial, Georgia, Times New Roman, Courier et Verdana. Nos piles de secours de base Sans Serif et Serif fonctionnent bien pour les modèles d'e-mails.