font-family
Choisit une police, avec une liste de polices de secours en cas d’indisponibilité de la première.
- Valeur initiale
dépend du navigateur- Héritée
- Oui
- Animable
- non
- S’applique à
- tous les éléments
- JavaScript
element.style.fontFamily = "Georgia, serif"
Exemple
#body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}<p style="font-family: system-ui, sans-serif; margin: 0 0 8px">Texte dans la police système.</p>
<p style="margin: 0">Code : <code style="font-family: ui-monospace, Menlo, monospace;">const points = 120</code></p>Définition et utilisation
#La propriété font-family prend une liste de polices séparées par des virgules. Le navigateur utilise la première disponible, donc la liste fonctionne comme un plan de secours : si l’utilisateur n’a pas la police Georgia, il obtient la suivante de la liste.
Terminez toujours la liste par une famille générique : serif (avec empattements), sans-serif (sans empattements), monospace (largeur de caractère fixe) ou system-ui (la police du système d’exploitation). Mettez entre guillemets les noms de polices contenant des espaces.
Vous chargez des polices personnalisées, par exemple depuis Google Fonts, avec une règle @font-face ou la feuille de style d’un fournisseur, puis vous indiquez leur nom dans font-family. La propriété est héritée, donc on la définit généralement une seule fois, sur l’élément body.
Syntaxe
#font-family: <nom de police> [, <nom de police>]* , <famille générique>;Valeurs
#- Une police sans empattements, facile à lire sur les écrans.
- Une police avec empattements, associée aux livres et aux journaux.
- Tous les caractères ont la même largeur, comme dans un éditeur de code.
- Une police précise avec une famille de secours.
- Une police qui imite l’écriture manuscrite. Son apparence dépend fortement du système.
Valeurs en pratique
#sans-serif
.demo { font-family: sans-serif; }serif
.demo { font-family: serif; }monospace
.demo { font-family: monospace; }Georgia, serif
.demo { font-family: Georgia, serif; }cursive
.demo { font-family: cursive; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Terminez toujours la liste par une famille générique, par exemple
sans-serif. Sans elle, le navigateur risque d’utiliser une police avec empattements. - Chaque fichier de police supplémentaire est un téléchargement de plus. Limitez le nombre de polices et de graisses à celles que vous utilisez vraiment.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.