La règle @ @font-face permet de définir les polices d'écriture à utiliser pour afficher le texte de pages web. 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. 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.

Syntaxe

Descripteurs

font-family
Ce descripteur définit un nom qui sera utilisé pour désigner cette police dans les différentes règles associées (par exemple : font-family: <nom-famille>; )
src
L'URL de l'emplacement du fichier de police distant ou le nom de la police installée sur l'ordinateur de l'utilisateur sous la forme local("Nom police"). Si cette police n'est pas trouvée, les autres sources seront employées jusqu'à ce qu'une source corresponde.
font-variant
Une valeur font-variant.
font-stretch
Une valeur font-stretch.
font-weight
Une valeur font-weight.
font-style
Une valeur font-style.
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: [ <uri> [format(<string>#)]? | <font-face-name> ]#; ] ||
  [ unicode-range: <urange>#; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: normal | <feature-tag-value>#; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <weight>; ] ||
  [ font-style: <style>; ]
}


<family-name> = <string> | <IDENT>+
<feature-tag-value> = <string> [ <integer> | on | off ]?

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

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.
  • Il n'existe pas de types MIME définis pour les formats de police TrueType, OpenType et Web Open File Format (WOFF). Aussi, le type MIME du fichier indiqué n'est pas pris en compte.

Spécifications

Spécification État Commentaires
WOFF File Format 2.0
La définition de 'WOFF2 font format' dans cette spécification.
Candidat au statut de recommandation Spécification du format de police avec un nouvel algorithme de compression.
WOFF File Format 1.0
La définition de 'WOFF font format' dans cette spécification.
Recommendation Spécification du format de police.
CSS Fonts Module Level 3
La définition de '@font-face' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Firefox (Gecko) Chrome Internet Explorer Opera Safari
Support simple 3.5 (1.9.1) 4.0 4.0 10.0 3.1
WOFF 3.5 (1.9.1) 6.0 9.0 11.10 5.1
WOFF2 39 (39)[1] 38 Pas de support 24 Pas de support
Polices SVG[2] Pas de support[3] (Oui) Pas de support (Oui) (Oui)
unicode-range

36 (36)

(Oui) 9.0 (Oui) (Oui)
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mini Opera Mobile Safari Mobile
Support simple (Oui) 1.0 (1.9.1) ? Pas de support 10.0 (Oui)
WOFF 4.4 5.0 (5.0) 10.0 Pas de support 11.0 5.0
WOFF2 Pas de support 39.0 (39.0)[1] Pas de support ? ? Pas de support
Polices SVG[2] ? Pas de support[3] ? Pas de support 10.0 (Oui)
unicode-range ? 36.0 (36.0) ? Pas de support ? (Oui)

[1] Pour les versions de Gecko entre Gecko 35 et Gecko 3, le support de WOFF2 est activé par défaut uniquement pour les versions Nightly et Aurora. Pour utiliser ce format sur les canaux Beta et Release, l'utilisateur doit activer la préférence gfx.downloadable_fonts.woff2.enabled.

[2] La prise en charge des polices SVG a été abandonnée au profit des glyphes SVG contenus dans les paquets de police OpenType.

[3] Le bug bug 119490 avait été saisi afin que Gecko implémente les polices SVG. Étant donné que les polices SVG ont été remplacées par les glyphes SVG au sein des paquets de police OpenType. Le bug a donc été clôturé.

Notes

  • La prise en charge du format de police Embedded OpenType n'est pas indiquée dans le tableau de compatibilité car c'est une fonctionnalité propriétaire. Avant IE 9.0, IE ne prenait en charge que ce format.
  • TrueType et OpenType ne sont pas inclus dans ce tableau car ils sont remplacées par WOFF.
  • La politique de même origine n'est pas implémentée dans les navigateurs basés sur WebKit tels que Safari et Safari Mobile. Cela valait également pour les navigateurs basés sur Blink jusqu'à septembre 2014 (Chrome 37, Opera 24).

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Dernière mise à jour par : SphinxKnight,