La propriété font-family permet de définir une liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé.

Les valeurs sont séparées par des virgules, indiquant chacune une police alternative. Le moteur choisira la première valeur pour laquelle la police correspondante est installée sur l'ordinateur ou qui peut être téléchargée via la règle @ @font-face définie.

Pour fixer font-family et d'autres propriétés liées aux polices de caractères, on pourra utiliser la propriété raccourcie font.

Les auteurs doivent toujours inclure une famille de police générique dans cette liste car il n'y a aucune certitude qu'une police donnée aura été installée sur l'ordinateur ni qu'elle pourra être téléchargée grâce à @font-face. L'utilisation d'une famille de police générique permet au navigateur d'utiliser une police acceptable en recours si besoin.

Note : La propriété font-family définit une liste de police, ordonnée par priorité, de la plus haute à la plus basse. La sélection de la police ne se fait pas pour l'ensemble du texte mais caractère par caractère. Ainsi si une police ne dispose pas du caractère à représenter, ce sera la police suivante qui sera utilisée pour représenter le caractère. Pour Internet Explorer, cela ne fonctionne pas avec la version 6 et les version antérieures.

Les propriétés font-style, font-variant et font-size permettront d'influencer le choix en fonction du style, de la variante ou de la taille disponible parmi les polices de la liste.

Valeur initialedépend de l'agent utilisateur
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

/* Un nom de police suivi d'un nom de famille générique */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* Un nom de famille de polices générique */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;

/* Valeurs globales */
font-family: inherit;
font-family: initial;
font-family: unset;

La propriété font-family permet de lister différentes familles de police, séparées par des virgules. Chaque nom de famille est une valeur <family-name> ou <generic-name>.

Dans l'exemple suivant, on liste deux familles de police, la première utilise une valeur <family-name> et la seconde utilise une valeur <generic-name> :

font-family: Gill Sans Extrabold, sans-serif;

Valeurs

<family-name>
Le nom d'une famille de polices ; par exemple « Times » ou « Helvetica » sont des noms de famille de polices. Les noms de familles qui comportent des blancs doivent être encadrées par des doubles quotes (").
<generic-name>

Les noms de famille génériques sont utilisés comme mécanisme de secours pour conserver l'intention de mise en forme de l'auteur lorsqu'aucune des polices indiquées n'est disponible. Les noms de famille génériques sont des mots-clés et ne doivent pas être encadrés par des doubles quotes. Un nom de famille générique devrait être utilisé comme dernier élément de la liste des noms. Les mots-clés suivants sont définis :

serif
Les caractères possèdent des empattements.
Voici des exemples de polices avec empattement : Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.
sans-serif
Les caractères n'ont pas d'empattement, leurs extrémités sont anguleuses.
Voici des exemples de polices correspondantes : "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.
monospace
Tous les caractères mesurent la même largeur, on dit que la police est à chasse fixe.
Les polices "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace sont à chasse fixe.
cursive
Les caractères des polices cursives possèdent des extrémités permettant de les joindre les uns aux autres, partiellement ou complètement. Cela donne un résultat semblable à l'écriture manuelle au crayon plutôt qu'à des caractères d'imprimerie.
Voici quelques exemples de polices cursives : "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
fantasy
Les polices fantaisie sont des polices décoratives pour lesquelles les caractères sont représentées de façon légère.
Les polices suivantes sont des exemples de cette famille : Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
system-ui
Les glyphes utilisés sont ceux de l'interface utilisateur par défaut pour le système d'exploitation de la plateforme. Les variantes typographiques différant grandement d'une région à l'autre, cette famille générique est utilisée pour les polices qui ne correspondent pas aux autres familles génériques.

Validité des noms de famille

Les noms de famille de polices doivent être encadrés par des doubles ou doivent former une série d'un ou plusieurs identifiants valides. Cela signifie que les signes de ponctuation et les chiffres débutant chaque fragment doivent être échappés pour les noms de famille qui ne sont pas encadrés par des quotes.

Les déclarations suivantes sont valides :

font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

Et ces déclarations sont invalides :

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

Syntaxe formelle

[ <family-name> | <generic-family> ]#


<family-name> = <string> | <custom-ident>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

Exemples

CSS

.exempleserif {
  font-family: Times, "Times New Roman", Georgia, serif;
}

.exemplesansserif {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.exemplemonospace {
  font-family: "Lucida Console", Courier, monospace;
}

.exemplecursive {
  font-family: cursive;
}

.exemplefantasy {
  font-family: fantasy;
}

HTML

<div class="exempleserif">
Voici un exemple de police avec empattement (serif).
</div>

<div class="exemplesansserif">
Voici un exemple de police sans empattement (sans-serif).
</div>

<div class="exemplemonospace">
Voici un exemple de police à chasse fixe (monospace).
</div>

<div class="exemplecursive">
Voici un exemple de police cursive.
</div>

<div class="exemplefantasy">
Voici un exemple de police fantaisie.
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Fonts Module Level 4
La définition de 'generic font families' dans cette spécification.
Version de travail Ajout de nouvelles familles génériques dont : system-ui, emoji, math et fangsong.
CSS Fonts Module Level 3
La définition de 'font-family' dans cette spécification.
Candidat au statut de recommandation Aucune modification significative.
CSS Level 2 (Revision 1)
La définition de 'font-family' dans cette spécification.
Recommendation Aucune modification significative.
CSS Level 1
La définition de 'font-family' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1IE Support complet 3Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 1Chrome Android Support complet 18Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 6Safari iOS Support complet 1Samsung Internet Android Support complet Oui
system-ui
Expérimentale
Chrome Support complet 56Edge Aucun support NonFirefox Aucun support Non
Aucun support Non
Support complet 43
Notes Autre nom
Notes Supported on macOS only.
Autre nom Cette fonctionnalité utilise le nom non-standard : -apple-system
IE Aucun support NonOpera Support complet 43Safari Support complet 9
Notes Autre nom
Support complet 9
Notes Autre nom
Notes Supported since macOS 10.11.
Autre nom Cette fonctionnalité utilise le nom non-standard : -apple-system
WebView Android Support complet 56Chrome Android Support complet 56Edge Mobile Aucun support NonFirefox Android ? Opera Android Support complet 43Safari iOS Support complet Oui
Notes Autre nom
Support complet Oui
Notes Autre nom
Notes Supported since iOS 9.
Autre nom Cette fonctionnalité utilise le nom non-standard : -apple-system
Samsung Internet Android Support complet 6.0

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB, Sheppy, Mgjbot, Fredchat, Kyodev, VincentN
Dernière mise à jour par : SphinxKnight,