Un navigateur ne sait afficher du texte qu'avec une police précise, et cette police n'est pas forcément installée sur l'ordinateur du visiteur. La propriété font-family est la réponse de CSS à ce problème : au lieu d'imposer un seul nom, elle donne une liste de candidats classés par ordre de préférence.
C'est une propriété que l'on retrouve dans la quasi totalité des feuilles de style, souvent posée une fois sur body puis héritée par le reste de la page grâce à l'Héritage CSS. Bien la régler évite deux mauvaises surprises : un site qui s'affiche dans une police par défaut disgracieuse, ou pire, un site qui ne s'affiche dans aucune police parce que le seul nom fourni n'existe nulle part.
Définition
font-family accepte une liste de noms de polices séparés par des virgules. Le navigateur essaie le premier nom, et s'il ne le trouve pas installé sur l'appareil (ou chargé via une police personnalisée), il passe au suivant, jusqu'à en trouver un disponible.
body {
font-family: "Helvetica Neue", Arial, sans-serif;
}Ici, le navigateur cherche d'abord Helvetica Neue. S'il ne la trouve pas, comme c'est le cas sur la plupart des ordinateurs Windows, il tente Arial. Et si même Arial venait à manquer, la police générique sans-serif prend le relais : elle ne désigne pas une police précise, mais demande au système de fournir sa police sans empattements par défaut.
La liste de secours
Cette chaîne de candidats porte un nom : la liste de secours, ou fallback stack. La règle à retenir est simple : elle doit toujours se terminer par une famille générique, jamais par un nom de police précis. Sans cela, un visiteur qui ne possède aucune des polices citées se retrouve avec le rendu brut du navigateur, qui varie d'un système à l'autre.
| Famille générique | Ce qu'elle demande au système |
|---|---|
serif | Une police à empattements, comme Times New Roman |
sans-serif | Une police sans empattements, comme Arial |
monospace | Une police à chasse fixe, pour du code |
system-ui | La police d'interface native de l'appareil |
Un nom de police qui contient un espace, comme "Helvetica Neue" ou "Segoe UI", doit être entouré de guillemets. Sans eux, CSS lirait deux mots séparés et la déclaration échouerait silencieusement, sans qu'aucune erreur ne s'affiche dans la console.
Les polices système
Il existe une famille de piles de secours à part, faite uniquement de polices système. Le mot clé system-ui demande la police d'interface native, celle des menus et des boutons de l'appareil : San Francisco sur macOS, Segoe UI sur Windows, Roboto sur Android. Ce choix a un avantage concret : ces polices sont déjà présentes sur l'appareil, donc rien à télécharger, et le texte s'affiche dès la première image, sans clignotement.
body {
font-family:
system-ui,
-apple-system,
"Segoe UI",
Roboto,
sans-serif;
}Cette pile mélange plusieurs façons historiques de viser la même cible, parce que le support de system-ui seul a mis du temps à s'harmoniser entre navigateurs. C'est un choix fréquent pour une interface d'application, moins pour un site vitrine qui veut une identité visuelle propre à la marque.
Le piège avec une police personnalisée
Écrire font-family: "Poppins", sans-serif; ne suffit jamais à faire apparaître Poppins si cette police n'est pas installée sur l'ordinateur du visiteur. font-family ne fait que nommer un candidat : c'est la règle @font-face, ou un lien vers un fournisseur de polices, qui doit fournir le fichier réel et le rattacher à ce nom.
Oublier @font-face ne provoque aucune erreur visible. La police demandée est simplement absente, le navigateur passe au candidat suivant de la liste sans prévenir, et le site s'affiche dans une police de secours quelconque. Le bon réflexe est d'ouvrir les outils de développement et de vérifier, dans l'onglet réseau, que le fichier de la police se charge bien.
Un autre piège guette la font-weight : demander une graisse que la police chargée ne propose pas produit parfois une fausse graisse recréée par le navigateur, parfois rien du tout selon les cas. Charger explicitement les graisses utilisées évite ce genre de surprise.
Bonnes pratiques
Prévoyez toujours au moins trois niveaux : la police voulue, un ou deux substituts proches visuellement, puis une famille générique en dernier recours. Testez le rendu en désactivant temporairement le chargement de la police personnalisée, pour voir ce que verra un visiteur avec une connexion lente. Et gardez à l'esprit que la taille du texte, réglée par font-size, ne rend pas deux polices identiques : deux polices à la même taille en points peuvent paraître très différentes en encombrement réel. Notre formation HTML et CSS consacre une section entière au chargement des polices, du choix du fournisseur jusqu'à l'optimisation du temps d'affichage.
Questions fréquentes
Que se passe-t-il si aucune police de la liste n'est disponible ?
Le navigateur retombe sur sa police par défaut interne, généralement une police à empattements assez quelconque. C'est pour éviter ce scénario que la liste doit toujours se terminer par une famille générique comme sans-serif, qui garantit un résultat cohérent même dans le pire des cas.
Faut-il toujours mettre des guillemets autour du nom d'une police ?
Ils sont obligatoires dès que le nom contient un espace, un chiffre en première position ou un caractère spécial. Pour un nom d'un seul mot comme Arial ou Georgia, ils sont optionnels, mais beaucoup d'équipes les mettent partout par cohérence et pour éviter d'y penser au cas par cas.
Pourquoi ma police Google Fonts ne s'affiche pas alors que le CSS semble correct ?
Le cas le plus fréquent est un nom qui ne correspond pas exactement à celui déclaré dans le lien d'import, espace ou casse différente, ou un import de police placé après les règles qui l'utilisent. Vérifiez aussi que le lien vers le fournisseur de polices est bien chargé avant la feuille de style qui s'en sert.
Peut-on utiliser plusieurs familles de polices différentes sur une même page ?
Oui, rien n'empêche de réserver une police pour les titres et une autre pour le corps du texte, en déclarant deux règles font-family distinctes sur des sélecteurs différents. C'est même une pratique courante en design, tant que le nombre total de polices chargées reste raisonnable pour ne pas alourdir le temps de chargement.