La propriétéCSSfont-family définit une liste priorisée d'un ou plusieurs noms de famille de police et/ou de noms de famille génériques pour l'élément sélectionné.

Exemple interactif

font-family: Georgia, serif;

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

font-family: sans-serif;

font-family: serif;

font-family: cursive;

font-family: system-ui;

<section>  <p>    Londres. Le trimestre de la Saint-Michel vient de se terminer, et le Lord    Chancelier siège dans le Lincoln's Inn Hall. Un temps de novembre    implacable. Autant de boue dans les rues que si les eaux venaient tout juste    de se retirer de la surface de la terre, et il ne serait pas étonnant de    croiser un Mégalosaure, long d'une quarantaine de pieds, se dandinant comme    un lézard éléphantesque sur Holborn Hill.  </p></section>

section {  font-size: 1.2em;}

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 fixerfont-family et d'autres propriétés liées aux polices de caractères, on pourra utiliser la propriété raccourciefont.

Les auteur·ice·s doivent toujours inclure au moins un nom de famille générique dans une listefont-family, car il n'est pas garanti qu'une police donnée soit disponible. Cela permet au navigateur de choisir une police de secours acceptable si nécessaire.

La propriétéfont-family définit une liste de polices, de la priorité la plus haute à la plus basse. La sélection de la police ne s'arrêtepas à la première police de la liste présente sur le système de l'utilisateur·ice. Au contraire, la sélection de la police se faitcaractère par caractère, ainsi si une police disponible ne possède pas le glyphe pour un caractère nécessaire, les polices suivantes sont essayées. Lorsqu'une police n'est disponible que dans certainsstyles,variantes outailles, ces propriétés peuvent aussi influencer la famille de police choisie.

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;font-family: ui-serif;font-family: ui-sans-serif;font-family: ui-monospace;font-family: ui-rounded;font-family: math;font-family: fangsong;/* Valeurs globales */font-family: inherit;font-family: initial;font-family: revert;font-family: revert-layer;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. Il doit s'agir soit d'une seule valeur de type<string>, soit d'une séquence d'identifiants personnalisés (<custom-ident>) séparés par des espaces. Les valeurs de chaîne de caractères doivent être entourées de guillemets mais peuvent contenir n'importe quel caractère Unicode. Les identifiants personnalisés ne sont pas entourés de guillemets, mais certains caractères doivent être échappés.

Il est recommandé d'entourer de guillemets les noms de famille de police qui contiennent des espaces, des chiffres ou des signes de ponctuation autres que les traits d'union.

Voir aussiValidité des noms de famille.

<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·ice 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 glyphes possèdent des terminaisons, des extrémités évasées ou effilées, ou de véritables empattements.

Par exemple : Lucida Bright, Lucida Fax, Palatino, Palatino Linotype, Palladio, URW Palladio, serif.

sans-serif

Les glyphes ont des terminaisons simples, sans empattement.

Par exemple : Open Sans, Fira Sans, Lucida Sans, Lucida Sans Unicode, Trebuchet MS, Liberation Sans, Nimbus Sans L, sans-serif.

monospace

Tous les glyphes ont la même largeur fixe.

Par exemple : Fira Mono, DejaVu Sans Mono, Menlo, Consolas, Liberation Mono, Monaco, Lucida Console, monospace.

cursive

Les glyphes des polices cursives possèdent généralement des terminaisons jointives ou d'autres caractéristiques cursives au-delà de celles des polices italiques. Les glyphes sont partiellement ou complètement reliés, et le résultat ressemble davantage à une écriture manuscrite au stylo ou au pinceau qu'à des lettres imprimées.

Par exemple : 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.

Par exemple : Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.

system-ui

Les glyphes utilisés sont ceux de la police d'interface utilisateur par défaut pour la plateforme concernée. Les traditions typographiques variant grandement à travers le monde, cette famille générique est prévue pour les polices qui ne correspondent pas clairement aux autres familles génériques.

Note :Comme son nom l'indique,system-ui est destiné à donner aux éléments d'interface un aspect natif, et non à composer de longs paragraphes de texte. Cela peut rendre la police affichée inadaptée pour certain·e·s utilisateur·ice·s — par exemple, la police CJK par défaut de Windows peut mal afficher les écritures latines, et l'attributlang peut ne pas affecter la police affichée. Certains systèmes d'exploitation ne permettent pas de personnalisersystem-ui, tandis que les navigateurs permettent généralement de personnaliser la famille de policessans-serif. Pour de longs paragraphes, utilisezsans-serif ou une autre famille de polices non-UI.

ui-serif

La police serif par défaut de l'interface utilisateur.

ui-sans-serif

La police sans-serif par défaut de l'interface utilisateur.

ui-monospace

La police monospace par défaut de l'interface utilisateur.

ui-rounded

La police par défaut de l'interface utilisateur avec des caractéristiques arrondies.

math

Ceci concerne les besoins stylistiques particuliers de la représentation des mathématiques : exposant et indice, accolades sur plusieurs lignes, expressions imbriquées, et glyphes doublement barrés avec des significations distinctes.Les feuilles de style de l'agent utilisateur peuvent définirmath { font-family: math } afin que l'élément MathML<math> utilise par défaut des polices appropriées.

fangsong

Un style de caractères chinois particulier se situant entre le style serif Song et la forme cursive Kai. Ce style est généralement utilisé pour les documents officiels du gouvernement.

Définition formelle

Syntaxe formelle

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

<family-name> =
<string>|
<custom-ident>+

<generic-family> =
<generic-script-specific>|
<generic-complete>|
<generic-incomplete>

<generic-script-specific> =
generic(fangsong)|
generic(kai)|
generic(khmer-mul)|
generic(nastaliq)

<generic-complete> =
serif|
sans-serif|
system-ui|
cursive|
fantasy|
math|
monospace

<generic-incomplete> =
ui-serif|
ui-sans-serif|
ui-monospace|
ui-rounded

Exemples

Quelques familles de polices courantes

.serif {  font-family: "Times", "Times New Roman", "Georgia", serif;}.sansserif {  font-family: "Verdana", "Helvetica", "Arial", sans-serif;}.monospace {  font-family: "Lucida Console", "Courier New", monospace;}.cursive {  font-family: cursive;}.fantasy {  font-family: fantasy;}.math {  font-family: math;}.fangsong {  font-family: fangsong;}

div {  margin: 0.5rem;}

<div>Ceci est un exemple de police avec empattement.</div><div>Ceci est un exemple de police sans empattement.</div><div>Ceci est un exemple de police à chasse fixe.</div><div>Ceci est un exemple de police cursive.</div><div>Ceci est un exemple de police fantaisie.</div><div>Ceci est un exemple de police fangsong.</div><div>  Ceci est un exemple de police mathématique&nbsp;: ℝ, ∫, ∑…</div>

Résultat

Validité des noms de famille

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 @toto,  sans-serif;font-family: #POUND, sans-serif;font-family:  Hawaii 5-0,  sans-serif;

L'exemple suivant est techniquement valide mais n'est pas recommandé :

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

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriétéfont-style
• La propriétéfont-weight
• La propriétéfont-variant-emoji
• L'attribut SVGfont-family
• Apprendre : Mise en forme fondamentale du texte et des polices