Font-family - Propriété CSS
Résumé des caractéristiques de la propriété font-family
font-family passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de font-family.
font-family.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG.
Description des termes utilisés sur le schéma :
stringest le nom d'une police de caractères (apostrophes ou guillemets recommandés).- Plusieurs polices peuvent être indiquées, en les séparant par des virgules.
Description de la propriété font-family.
font-family définit la police de caractères de l'élément.
Plusieurs polices peuvent être spécifiées, séparées par des virgules : le navigateur utilisera la première qui est disponible sur le poste.
Il est recommandé de terminer cette liste par une police générique (police que tous les navigateurs sont censés interpréter au mieux).
font-family: 'Arial', 'Helvetica', sans-serif;
La sélection de la police se fait caractère par caractère : le navigateur ne se contente pas de choisir la première police disponible sur le poste. Ainsi si une variante n'existe pas dans la première police (italique par exemple), et que cette variante est utilisée quelque part sur la page, le navigateur peut utiliser une police parmi les suivantes pour restituer cette variante.
Attention ! Les noms des polices peuvent être inscrits entre apostrophes ou guillemets, particulièrement s'ils contiennent des espaces. Mais le nom des polices génériques ne doit PAS être inscrit entre apostrophes ni guillemets.
Il est possible également de définir une police personnalisée qui sera téléchargée par le navigateur.
On peut ainsi être certain que la restitution sera fidèle. Ceci peut se faire avec la directive @font-face, ou une balise link
ajoutée dans la section head de la page.
Si vous souhaitez plus d'informations sur les formats de police de caractères, reportez vous à la propriété font.
Les différents usages de font-family.
Le mot font-family correspond à la propriété décrite sur cette page, mais peut aussi être un descripteur utilisable avec les directives suivantes :
@font-face: Définit tous les paramètres d'une police de caractères téléchargeable.@font-palette-values: Définit une palette de couleurs applicable ensuite à une police de caractères.
Syntaxe générale de font-family.
- font-family: 'Arial', sans-serif;
Si la police de caractères
Arialest disponible sur le poste de l'internaute, elle sera la police utilisée pour cet élément. Plusieurs polices peuvent être énumérées, séparées par des virgules. Le navigateur choisit la première qui est disponible sur le poste de l'internaute. Il est vivement conseillé de terminer cette liste par une police générique (voir ci-après).Les apostrophes autour du nom de la police sont conseillés et obligatoire si le nom de la police contient des espaces ou s'il peut prêter à confusion avec le nom d'une police générique. Par contre la police générique qui termine la liste ne doit PAS être spécifiée entre guillemets ni apostrophes.
Polices génériques.
- font-family: serif;
Caractères avec empattements, dans le genre de
Times,Times New Roman,Book Antiqua, etc.
Ces polices sont généralement à espacement proportionnel (la largeur de chacune des lettres n'est pas identique) et présentent des variations dans les épaisseurs des traits (pleins et déliés).Exemple : Portez ce vieux whisky au juge blond qui fume.
font-family:serif; - font-family: sans-serif;
Caractères sans empattements, dans le genre de
Arial,Helvetica, etc.
Ces polices sont en principe sans variation de l'épaisseur des traits (pas de pleins et déliés) ou des variations très faibles. Elles sont à espacement proportionnel.Exemple : Portez ce vieux whisky au juge blond qui fume.
font-family:sans-serif; - font-family: cursive;
Police dont la forme des caractères fait penser à une écriture manuscrite, dans le genre de
Brush Script.Exemple : Portez ce vieux whisky au juge blond qui fume.
font-family:cursive; - font-family: fantasy;
Comme son nom l'indique, il s'agit d'une police décorative. Cette définition étant relativement vague, le rendu d'une machine à l'autre peut être très différent en fonction des polices installées sur la machine.
Exemple : Portez ce vieux whisky au juge blond qui fume.
font-family:fantasy; - font-family: monospace;
Police à espacement fixe : tous les caractères ont la même largeur. Dans le genre de
courrier,Lucida Console, etc.
Ces polices peuvent être utiles lorsqu'il est nécessaire d'aligner des chiffres en colonnes ou pour afficher du code informatique.Exemple : Portez ce vieux whisky au juge blond qui fume.
font-family:monospace;
Polices système.
Ces polices génériques sont, dans la mesure du possible, associée à une police du système qui présente les caractéristiques nécessaires (présence d'empattements, caractères arrondis, etc). Si une telle police n'est pas trouvée, le navigateur propose une police par défaut.
Dans les échantillons ci-dessous, si le texte apparaît en monospace (une police bien reconnaissable), c'est que votre navigateur ne
reconnaît pas la police système.
- font-family: system-ui;
Police par défaut du système d'exploitation. On utilise cette police générique pour que l'aspect du document soit identique à celui du système.
Portez ce vieux whisky au juge blond qui fume.font-family:system-ui, monospace; - font-family: ui-serif;
Police avec empattements utilisée par le système d'exploitation.
Portez ce vieux whisky au juge blond qui fume.font-family:ui-serif, monospace; - font-family: ui-sans-serif;
Police sans empattements utilisée par le système d'exploitation.
Portez ce vieux whisky au juge blond qui fume.font-family:ui-sans-serif, monospace; - font-family: ui-monospace;
Police à espacement fixe utilisée par le système d'exploitation.
Portez ce vieux whisky au juge blond qui fume.font-family:ui-monospace, monospace; - font-family: ui-rounded;
Police avec des caractères de forme arrondie, utilisée par le système d'exploitation.
Portez ce vieux whisky au juge blond qui fume.font-family:ui-rounded, monospace; - font-family: math;
Police comportant les principaux symboles mathématiques, et les variantes stylistiques adaptée à la restitution des formules mathématiques : exposants, indices, accolades couvrant plusieurs lignes, etc.
∛ ∞ ∮ ≈ ⋶(quelques caractères de la plage2200à22FF)font-family:math, monospace; - font-family: fangsong;
Police traitant un style particulier d'écriture chinoise, surtout utilisé pour les documents officiels du gouvernement.
Ces polices sont rarement installées sur les ordinateurs non spécifiques aux langues CJK.
Portez ce vieux whisky au juge blond qui fume.font-family:fangsong, monospace; - font-family: initial; (Variable suivant le navigateur.) font-family: inherit; font-family: revert; font-family: revertLayer; font-family: unset;
Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Les polices téléchargeables.
Lorsque des polices de caractères très spécifiques sont utilisées sur une page, on peut être à peu près sûr qu'elles ne seront pas disponibles sur le poste de tous les internautes. On peut alors demander le téléchargement de cette police afin que le rendu soit fidèle sur toutes les machines.
Le chargement d'une police de caractères peut se faire de plusieurs façons. Tout d'abord, en CSS pur, avec la directive @font-face.
Il est possible de préciser certaines caractéristiques de la police (dans notre exemple il s'agit d'une police en caractères gras) :
@font-face {
font-family:'Ma Police';
src:url('https://domaine/chemin/police-bold.ttf');
font-weight:bold;
}
Les polices Google Fonts peuvent également être téléchargées avec une balise link dans l'en-tête de la page.
Dans l'exemple ci-dessous "Sofia" est le nom de la police.
<link href="https://fonts.googleapis.com/css?family=Sofia" rel="stylesheet">
Ou bien, toujours pour Google Fonts, une directive @import dans la feuille de styles.
Notez que ces codes (balise link ou directive @import) sont générés automatiquement par Google Fonts
en fonction des polices que vous sélectionnez.
@import url('https://fonts.googleapis.com/...');
On peut ensuite utiliser la police téléchargée avec la propriété font-family :
font-family:'Sofia';
Consultez également le descripteur font-display qui permet de définir le comportement du navigateur pendant le temps de chargement de la
police, ou en cas d'impossibilité de chargement de cette dernière.
Google met à disposition des développeurs web de nombreuses polices de caractères, utilisables librement
(licences Apache
ou SIL OFL (Open Font License)).
Voir l'impressionnante liste et les échantillons des polices Google.
Exemple d'Exemple d'animation de font-family.
La propriété font-family peut être animée. Bien entendu le passage d'une police à une autre se fera
de façon brutale, puisqu'il ne s'agit pas d'une valeur numérique.
Accéder à la propriété font-family par programme.
Javascript peut modifier la valeur de la propriété CSS font-family, comme celle de toutes les autres propriétés.
Il faut juste veiller à ne pas créer de confusion entre les guillemets ou les apostrophes faisant partie de la syntaxe Javascript, et ceux
qui entourent le nom de la police en CSS. Plusieurs solutions assez simples existent puisque CSS et Javascript acceptent indifféremment les
guillemets et les apostrophes. Dans nos exemples, nous avons choisi d'utiliser l'apostrophe en tant que délimiteur pour le CSS et le guillemet comme
délimiteur pour Javascript.
Remarque : le problème ne se pose pas pour les polices génériques puisque, en CSS, leur nom doit être écrit sans guillemets ni apostrophes.
Avec Javascript, modifier la valeur de font-family.
Javascript reconnaît deux syntaxes. Dans la première le nom de la propriété est écrit avec un tiret pour séparer les mots, comme en CSS. Dans la deuxième c'est une majuscule qui séparer les mots.
let el = document.getElementById('id');
el.style['font-family'] = "'Times New Roman'";
// ou
let el = document.getElementById('id');
el.style.fontFamily = "'Times New Roman'";
Avec Javascript, lire la valeur de font-family.
Voici un exemple de code Javascript qui renvoie la valeur de la propriété font-family lorsque cette dernière est définie dans
le code HTML, via l'attribut style de l'élément.
Si la propriété a été définie via un sélecteur CSS, sa valeur n'est pas retrouvée par ce code (pour cela voyez le code d'après).
let el = document.getElementById('id');
let value = el.style['font-family'];
// ou
let el = document.getElementById('id');
let value = el.style.fontFamily;
Avec Javascript, lire la valeur calculée de font-family.
La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages. Elle est toujours définie : cela peut être la valeur affectée directement
via un sélecteur CSS ou l'attribut style, une valeur héritée, ou en dernier recours, la valeur initiale de la propriété.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('font-family');
Avec JQuery, modifier la valeur de font-family.
Comme en Javascript, le nom de la propriété peut être écrit en kebab-case ou en camel-case.
$('#id').css('font-family', "'Times New Roman'");
// ou
$('#id').css('fontFamily', "'Times New Roman'");
Avec JQuery, lire la valeur calculée de font-family.
let value = $('#id').css('font-family');
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété font-family et affichent ensuite la valeur appliquée ou la valeur calculée.
Le cas de font-family est particulier : toutes les valeurs sont acceptées, même si elles ne correspondent à aucune police de caractères.
Dans le cas des autres propriétés, appliquer une valeur fausse revient à positionner la propriété à sa valeur initiale, ce qui se voit dans la valeur
calculée. Mais pour font-family la valeur fausse est enregistrée si elle était valide.
Exemple interactif avec la propriété font-family.
Compatibilité des navigateurs avec font-family.
La propriété font-family en elle-même ne pose aucun problème de compatibilité. Il faut cependant être vigilant quant au
choix de la police : certaines polices génériques sont mal reconnues ou dépendantes du système.
font-family.math pour la propriété font-family.system-ui représentant la police par défaut du système d'exploitation.ui : ui-serif, ui-sans-serif, ui-monospace, ui-rounded, etc.font-familymathsystem-uiui...Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
KaiOS Browser
Opéra Mobile
Opéra
Safari
Safari sur IOS
Firefox pour Androïd
Samsung Internet
Chrome
Edge
Firefox
Androïd Brower
Chrome pour Androïd
Baidu Browser
QQ Browser
UC Browser pour Androïd
Opéra mini
Histoire de la propriété font-family.
La propriété font-family est ancienne (déjà présente dans la première spécification du langage CSS), mais les valeurs acceptées ont beaucoup évolué :
introduction de plus en plus de polices génériques et système.
-
CSS 1 - Spécification concernant les feuilles de styles en cascade - Version 1
Ce premier niveau de la spécification CSS décrit le mécanisme des feuilles de styles en cascade. Les auteurs et les lecteurs peuvent ajouter des styles aux documents. Principalement destiné à la mise en forme des documents HTML, CSS permet de définir les couleurs, les polices de caractères, la mise en forme du texte, les espacements (marges), etc. Le langage CSS est d'une compréhension aisée, lisible et facile à rédiger, il utilise les termes courants de la publication de bureau.
Concernantfont-family. Définition initiale de la propriété, avec les valeurs prédéfinies suivantes :serif,sans-serif,cursive,fantasyetmonospace.
17 Novembre 1995Document de travail.
12 Novembre 1996Proposé à la recommandation.
17 Décembre 1996Recommandation.
13 Septembre 2018Ancienne spécification, déclarée obsolète. -
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.
Concernantfont-family. Prise en charge de la valeurinherit.04 Novembre 1997Document de travail.24 Mars 1998Proposé à la recommandation.11 Mai 1998Recommandation. -
Module CSS - Polices de caractères - Niveau 3
Cette spécification concerne les polices de caractères. Une police de caractères contient la représentation visuelle des caractères. Dans sa forme la plus simple il s'agit juste d'associer les codes des caractères aux formes de ceux-ci.
Au sein d'une famille de caractère, les formes sont définies, mais peuvent varier en épaisseur du trait, inclinaison, largeur, etc. Les propriétés CSSfont-...permettent de choisir l'aspect final des caractères.
Les polices de caractères peuvent être localisées sur le poste de l'internaute ou téléchargées.Concernantfont-family. Pas de changement concernantfont-family.21 Juillet 1997Document de travail.
03 Octobre 2013Candidat à la recommandation.14 Août 2018Proposé à la recommandation.20 Septembre 2018Recommandation. -
Module CSS - Polices de caractères - Niveau 4
Ce niveau 4 de la spécification sur les polices de caractères reprend ce qui est défini dans le niveau 3. Il ajoute la possibilité de définir ce qui se passe quand une police est longue à charger ou absente. Il ajoute également le support des polices colorées et précise de nombreux points encore mal définis dans le niveau 3.
Concernantfont-family. Prise en charge des polices de caractère système :caption,icon,menu, etc.11 Juillet 2017Document de travail. -
Module CSS - Polices de caractères - Niveau 5
Concernantfont-family. Ajout de nouvelles polices génériques :math,generic(),ui....29 Juin 2021Document de travail.
Voir aussi, concernant les polices de caractères.
De nombreuse propriétés et directives concernent les polices de caractères. Elles sont regroupées dans le module Module CSS - Polices de caractères. En voici la liste :
Propriétés :
em, ex, etc.Fonctions :
Directives :
Descripteurs :
@font-face. Définit la hauteur des caractères au dessus de la ligne de base.@font-face. Définit la hauteur des caractères au dessous de la ligne de base.@font-face. Détermine le comportement du navigateur face aux polices de caractères longues à charger.@font-face. Définit l'interligne de la police.@font-face. Définit la plage des codes de caractères à télécharger dans une police.