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.

@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.
font-style
Une valeur font-style.
font-variant
Une valeur font-variant.
font-weight
Une valeur font-stretch.
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.
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: [ <url> [ format(<string>#) ]? | <font-face-name> ]#; ] ||
  [ unicode-range: <urange>#; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: normal | <feature-tag-value>#; ] ||
  [ font-variation-settings: normal | [ <string> <number>] # ||
 [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <weight>; ] ||
  [ font-style: <style>; ]
}


<family-name> = <string> | <custom-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.
  • @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

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éChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple4123.54103.1
WOFF6 Oui3.5911.15.1
WOFF 23614

39

351

Non23102
SVG fonts Non Non Non Non Non Oui
font-display60 Non58 Non47 Oui
font-family4123.5693.1
font-feature-settings Non Non

343

15 -moz- 4

Non Non Non
font-style4 ?3.54103.1
font-weight4123.54103.1
src4123.5693.1
unicode-range Oui Oui369 Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Support simple Oui Oui124 Oui10 Oui
WOFF4.4 Oui Oui410115
WOFF 2363614

39

351

Non2310
SVG fonts Non Non Non Non Non Non Oui
font-display6060 Non58 Non47 Oui
font-family2.2 ?12410123.1
font-feature-settings Non Non Non

343

15 -moz- 4

Non Non Non
font-style Oui ? ?4 ?10 Oui
font-weight Oui Oui124 Oui10 Oui
src2.2 ?12410123.1
unicode-range ? ? Oui36 ? ? Oui

1. From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

2. Supported only on macOS 10.12 (Sierra) and later.

3. The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.

4. From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.

Voir aussi

Étiquettes et contributeurs liés au document

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