Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété font-family

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;

Attention ! Les noms des polices doivent ê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 avec apostrophes ou 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 CSS @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 à formats de polices pour le web.

Syntaxes pour font-family.

  • font-family: 'Arial', sans-serif;

    Si la police de caractères Arial est disponible sur le poste de l'internaute, elle sera la police utilisée pour cet élément. Dans le cas contraire, le navigateur choisira une police disponible dans la famille sans-serif.

    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.

    Les apostrophes autour du nom de la police sont conseillés et obligatoire si le nom de la police contient des espaces. Par contre la police générique qui termine la liste ne doit PAS être spécifiée entre guillemets.

 

Polices génériques.

  • font-family: serif;

    Caractères avec empattements, dans le genre de Times, Times New Roman, Book Antiqua, etc.

    Exemple : Portez ce vieux whisky au juge blond qui fume.

  • font-family: sans-serif;

    Caractères sans empattements, dans le genre de Arial, Helvetica, etc.

    Exemple : Portez ce vieux whisky au juge blond qui fume.

  • 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: fantasy;

    Police fantaisie, comme son nom l'indique.

    Exemple : Portez ce vieux whisky au juge blond qui fume.

  • 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: emoji;

    Police composée de pictogrammes, de symboles graphiques, tels que des smileys.

    Exemple : Portez ce vieux whisky au juge blond qui fume.

  • font-family: fangsong;

    Police traitant certaines particularités liées à l'écriture chinoise.

    Exemple : Portez ce vieux whisky au juge blond qui fume.

  • font-family: math;

    Police comportant des symboles mathématiques.

    Exemple : Portez ce vieux whisky au juge blond qui fume.

  •  

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.

  • font-family: system-ui;

    Police par défaut du système d'exploitation.

    Exemple : Portez ce vieux whisky au juge blond qui fume.

  • font-family: ui-serif;

    Police avec empattements utilisée par le système d'exploitation.

    Exemple : Portez ce vieux whisky au juge blond qui fume.

  • font-family: ui-sans-serif;

    Police sans empattements utilisée par le système d'exploitation.

    Exemple : Portez ce vieux whisky au juge blond qui fume.

  • font-family: ui-monospace;

    Police à espacement fixe utilisée par le système d'exploitation.

    Exemple : Portez ce vieux whisky au juge blond qui fume.

  • font-family: ui-rounded;

    Police avec des caractères de forme arrondie, utilisée par le système d'exploitation.

    Exemple : Portez ce vieux whisky au juge blond qui fume.

  • font-family: initial;

    La valeur initiale n'est pas définie dans la norme du W3C : elle dépend du navigateur.

  • font-family: unset; font-family: inherit;

    Reportez-vous à la description générale de ces valeurs.

Les polices fournies par Google.

Google met à disposition des développeurs web de nombreuses polices de caractères, utilisables librement. Voir la liste et les échantillons des polices Google.

Le chargement de l'une de ces polices se fait en ajoutant une balise link dans l'en-tête de la page HTML. Dans cet exemple "Sofia" est le nom de la police.

<link href="https://fonts.googleapis.com/css?family=Sofia" rel="stylesheet">

On peut ensuite utiliser cette police avec la propriété font-family :

font-family:'Sofia';

Simulateur.

Polices locales :
 
Polices génériques :
 
Polices Google :
Voyez le brick géant que j'examine près du wharf.

Voir aussi...

Polices et caractères - Propriétés.

  • font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
  • font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
  • font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
  • font-kerning : Ajustement du crénage entre caractères.
  • font-size : Ajuste la taille des caractères.
  • font-size-adjust : Définition du coefficient d'aspect de la police.
  • font-stretch : Modifie l'étirement ou la compression des caractères.
  • font-style : Sélectionne les styles italique ou oblique de la police de caractères.
  • font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
  • font-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
  • font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
  • font-variant-caps : Applique une capitalisation des caractères.
  • font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
  • font-variant-ligatures : Active ou désactive la ligature des caractères.
  • font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
  • font-weight : Sélectionne une graisse pour les caractères.
  • text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
  • text-decoration-color : Définit la couleur du trait de décoration.
  • text-decoration-line : Type de décoration : souligné, barré, etc.
  • text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
  • text-shadow : Ombrage du texte.
  • text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

  • @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
  • @font-face : Définit tous les paramètres d'une police de caractères téléchargeable.
  • @font-feature-values : Définit les variantes typographiques à utiliser.