Règle @font-face CSS

Définition et utilisation

En utilisant la règle @font-face, les concepteurs web n'ont plus besoin d'utiliser une police "sécurisée".

Dans la règle @font-face, vous devez d'abord définir le nom de la police (par exemple myFirstFont) puis pointer vers le fichier de police.

Astuce :L'URL de la police doit être en minuscules. Les majuscules peuvent entraîner des résultats inattendus dans IE !

Pour utiliser la police de caractères pour un élément HTML, référez-vous au nom de la police via la propriété font-family (myFirstFont) :

div {
  font-family: myFirstFont;
}

Voir également :

Tutoriel CSS :polices Web CSS

Exemple

Définir une police de caractères nommée "myFirstFont" et indiquer l'URL où elle peut être trouvée :

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

Essayez-le vous-même

Vous pouvez trouver plus d'exemples TIY en bas de la page.

Syntaxe CSS

@font-face {
  font-properties
}
Description de la police de caractères Valeur Description
font-family name Obligatoire. Définir le nom de la police de caractères.
src URL Obligatoire. Définir l'URL de téléchargement de la police de caractères.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Optionnel. Définir comment étirer la police. La valeur par défaut est "normal".
font-style
  • normal
  • italic
  • oblique
 Optionnel. Définir le style de la police. La valeur par défaut est "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Optionnel. Définir la gravité de la police. La valeur par défaut est "normal".
unicode-range unicode-range Optionnel. Définir la plage de caractères Unicode pris en charge par la police. La valeur par défaut est "U+0-10FFFF".

Plus d'exemples

Exemple

Vous devez ajouter une autre règle @font-face contenant le descripteur du texte gras :

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

Essayez-le vous-même

Le fichier "sansation_bold.woff" est un autre fichier de police contenant des caractères gras de la police Sansation.

Quand un texte qui doit être affiché en gras pour une police "myFirstFont" est défini, le navigateur l'utilise.

De cette manière, vous pouvez définir plusieurs règles @font-face pour le même police.

Prise en charge du navigateur

Internet Explorer, Firefox, Opera, Chrome et Safari prennent en charge la règle @font-face.

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge pleinement le format de police.

Format de police
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG Non pris en charge Non pris en charge Non pris en charge 3.2 Non pris en charge
EOT 6.0 Non pris en charge Non pris en charge Non pris en charge Non pris en charge

* Edge et IE : le format de police n'est valable que lorsque réglé sur "installable".

* Firefox : désactivé par défaut, mais peut être activé (le flag doit être réglé sur "true" pour utiliser WOFF2).