CSS : font-family - Web Formation

Description

La propriété font-family permet de définir la police d’écriture utilisée pour afficher du texte dans un élément HTML. Pour qu’un police soit utilisée, elle doit être disponible sur l’appareil de l’utilisateur qui consulte la page. Si la police demandée n’est pas disponible, alors elle sera substituée par la police par défaut.

.exemple {
    font-family: Raleway;
}

.exemple {    font-family: Raleway;}

La propriété permet de définir une liste de polices, classées par ordre de préférence. Le navigateur choisit alors la première police disponible sur l’appareil de l’utilisateur. Si aucune des polices demandées n’est pas disponible, alors le navigateur utilisera là-encore la police par défaut.

.exemple {
    font-family: Raleway, Verdana, Arial;
}

.exemple {    font-family: Raleway, Verdana, Arial;}

Pour s’assurer du meilleure rendu possible, il est recommandé de toujours terminer la liste par une famille générique (ex. : serif, sans-serif, monospace). Ainsi, si aucune des polices demandées n’est disponible sur l’appareil de l’utilisateur, une police de substitution appartenant à la famille générique est alors utilisée.

.exemple {
    font-family: Raleway, sans-serif;
}

.exemple {    font-family: Raleway, sans-serif;}

Valeurs possible

Voici les types de valeurs acceptées par font-family :

Type de police	Exemples	Description
Polices spécifiques	`"Roboto"`, `"Times New Roman"`	Nécessitent d’être installées sur l’appareil ou importées via CSS.
Polices génériques	`serif`, `sans-serif`, `monospace`, `cursive`	Catégories de polices. Le navigateur choisit une police équivalente.
Liste de polices	`"Roboto", "Helvetica", sans-serif`	Bonne pratique : propose plusieurs alternatives en cas d’indisponibilité.

Complément de syntaxe

Lorsque le nom d’une police contient des espaces, il doit être écrit entre guillemets :

p {
    font-family: "Times New Roman", serif;
}

p {    font-family: "Times New Roman", serif;}

Exemple

<p>Ce texte utilise une police spécifique</p>

<p>Ce texte utilise une police spécifique</p>

.police {
    font-family: "Gill Sans", "Arial", sans-serif;
    background-color: #f0f0f0;
    padding: 10px;
}

.police {    font-family: "Gill Sans", "Arial", sans-serif;    background-color: #f0f0f0;    padding: 10px;}

Aperçu du résultat

Ce texte utilise une police spécifique

Remarques

Toujours prévoir une police générique à la fin de la liste pour améliorer la compatibilité.
Il est possible de fournir la police désirée pour être sûr qu’elle soit disponible.