@font-face

La règle @ @font-face permet de définir les polices d'écriture à utiliser pour afficher le texte de pages web. Cette police peut être chargée depuis un serveur distant ou depuis l'ordinateur de l'utilisateur. Si la fonction local() est utilisée, elle indique à l'agent utilisateur de prendre en compte une police présente sur le poste de l'utilisateur.

En permettant aux auteurs de fournir leurs propres polices, il n'est plus nécessaire de dépendre uniquement des polices qui sont installées sur les postes des utilisateurs.

Il est courant d'utiliser les deux formes url() et local() afin de pouvoir utiliser une police locale si elle est disponible ou d'en télécharger une autre au cas où.

La règle @font-face peut être utilisée au niveau global d'une feuille de style et également au sein d'un groupe lié à une règle @ conditionnelle.

@font-face {
 font-family: "Open Sans";
 src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
        url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Syntaxe

Descripteurs

font-display

Ce descripteur détermine la façon dont une fonte est affichée selon qu'elle a été téléchargée et/ou si elle est prête à être utilisée.

font-family

Ce descripteur définit un nom qui sera utilisé pour désigner cette police dans les différentes règles associées.

font-stretch

Une valeur font-stretch. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : font-stretch: 50% 200%;.

font-style

Une valeur font-style. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : font-style: oblique 20deg 50deg;.

font-variant

Une valeur font-variant.

font-weight

Une valeur font-weight. Depuis Firefox 61 et pour les navigateurs récents, il est possible d'utiliser deux valeurs afin d'indiquer l'intervalle pris en charge par une fonte, par exemple : font-weight: 100 400;.

font-feature-settings

Ce descripteur permet d'avoir un contrôle avancé sur les fonctionnalités typographiques relatives aux fontes OpenType.

font-variation-settings

Ce descripteur permet d'avoir un contrôle de bas niveau sur les variations des polices OpenType et TrueType en indiquant les nom des axes et des fonctionnalités à faire varier.

src

Indique la ressource qui contient les données pour la police d'écriture. Cela peut être une URL vers un fichier distant ou le nom d'une police de caractères présente sur l'ordinateur de l'utilisateur.

On peut fournir une indication de format au navigateur (afin que celui-ci sélectionne celui qui lui convient le mieux) sous la forme d'une fonction format() qui contient le type comme argument :

src: url(ideal-sans-serif.woff) format("woff"),
     url(basic-sans-serif.ttf) format("truetype");

Les types utilisables sont : "woff", "woff2", "truetype", "opentype", "embedded-opentype" et "svg".

unicode-range

L'intervalle des points de code Unicode pour lesquels la règle  @font-face s'applique.

Syntaxe formelle

@font-face {
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ]
}
où 
<family-name> = <string> | <custom-ident>+

Exemples

Police distante

CSS

@font-face {
  font-family: "Bitstream Vera Serif Bold";
  src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
}

body {
  font-family: "Bitstream Vera Serif Bold", serif;
} 

HTML

<p> Et voici Bitstream Vera Serif Bold.</p>

Résultat

Police locale

Ici, l'agent utilisateur tente d'utiliser la police Helvetica Neue Bold ou HelveticaNeue-Bold si elle existe sur l'ordinateur de l'utilisateur. Sinon, il utilise la police distante MgOpenModernaBold.ttf.

CSS

@font-face {
  font-family: MaHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

HTML

<p> Et voici Ma Helvetica.</p>

Résultat

Types MIME associés aux polices

Voici, selon les différents formats de police, les types MIME associés :

TrueType

font/ttf

OpenType

font/otf

Web Open File Format

font/woff

Web Open File Format 2

font/woff2

Notes

• Les restrictions d'origine (même domaine) s'appliquent également sur les polices web sauf si les contrôles d'accès HTTP sont paramétrés afin de lever cette restriction.
• @font-face ne peut pas être déclaré au sein d'un sélecteur CSS. Ainsi l'exemple suivant ne fonctionnera pas :

  .nomClasse {
    @font-face {
      font-family: MyHelvetica;
      src: local("Helvetica Neue Bold"),
           local("HelveticaNeue-Bold"),
           url(MgOpenModernaBold.ttf;
      font-weight: bold;
    }
  }

Spécifications

Compatibilité des navigateurs

Voir aussi

• À propos de WOFF
• Le générateur de règles @font-face par Everythingfonts
• Le générateur de règles @font-face par FontSquirrel
• Des polices obtenues avec @font-face (en anglais, sur hacks.mozilla.org)
• Une bibliothèque de polices ouvertes (Open Font Library)
• Où puis-je utiliser WOFF ? (en anglais sur caniuse.com)
• Où puis-je utiliser les polices SVG ?