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("opentype");

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>; ]
}


<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

Spécification État Commentaires
WOFF File Format 2.0
La définition de 'WOFF2 font format' dans cette spécification.
Recommendation 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 4Opera Support complet 10Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
WOFFChrome Support complet 6Edge Support complet OuiFirefox Support complet 3.5IE Support complet 9Opera Support complet 11.1Safari Support complet 5.1WebView Android Support complet 4.4Chrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 11Safari iOS Support complet 5Samsung Internet Android Support complet Oui
WOFF 2Chrome Support complet 36Edge Support complet 14Firefox Support complet 39
Support complet 39
Support complet 35
Désactivée
Désactivée 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.
IE Aucun support NonOpera Support complet 23Safari Support complet 10
Notes
Support complet 10
Notes
Notes Supported only on macOS 10.12 (Sierra) and later.
WebView Android Support complet 37Chrome Android Support complet 36Edge Mobile Support complet 14Firefox Android Support complet 39
Support complet 39
Support complet 35
Désactivée
Désactivée 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.
Opera Android Support complet 23Safari iOS Support complet 10Samsung Internet Android Support complet 3.0
SVG fonts
ObsolèteNon-standard
Chrome Aucun support NonEdge Aucun support NonFirefox Aucun support NonIE Aucun support NonOpera Aucun support NonSafari Support complet OuiWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Aucun support NonOpera Android Aucun support NonSafari iOS Support complet OuiSamsung Internet Android Aucun support Non
font-displayChrome Support complet 60Edge Aucun support NonFirefox Support complet 58IE Aucun support NonOpera Support complet 47Safari Support complet OuiWebView Android Support complet 60Chrome Android Support complet 60Edge Mobile Aucun support NonFirefox Android Support complet 58Opera Android Support complet 47Safari iOS Support complet OuiSamsung Internet Android Aucun support Non
font-familyChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 6Opera Support complet 9Safari Support complet 3.1WebView Android Support complet 2.2Chrome Android ? Edge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet 12Safari iOS Support complet 3.1Samsung Internet Android Support complet Oui
font-feature-settingsChrome Aucun support NonEdge Aucun support NonFirefox Support complet 34
Notes
Support complet 34
Notes
Notes 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.
Support complet 15
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
IE Aucun support NonOpera Aucun support NonSafari Aucun support NonWebView Android Aucun support NonChrome Android Aucun support NonEdge Mobile Aucun support NonFirefox Android Support complet 34
Notes
Support complet 34
Notes
Notes 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.
Support complet 15
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4.
Opera Android Aucun support NonSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
font-variation-settingsChrome Support complet 62Edge Aucun support NonFirefox Support complet 60
Désactivée
Support complet 60
Désactivée
Désactivée From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Aucun support NonOpera Support complet 49Safari Aucun support NonWebView Android Support complet 62Chrome Android Support complet 62Edge Mobile Aucun support NonFirefox Android Support complet 60
Désactivée
Support complet 60
Désactivée
Désactivée From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Support complet OuiSafari iOS Aucun support NonSamsung Internet Android Aucun support Non
font-styleChrome Support complet 4Edge ? Firefox Support complet 3.5IE Support complet 4Opera Support complet 10Safari Support complet 3.1WebView Android Support complet OuiChrome Android ? Edge Mobile ? Firefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
font-weightChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 4Opera Support complet 10Safari Support complet 3.1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet 10Safari iOS Support complet OuiSamsung Internet Android Support complet Oui
srcChrome Support complet 4Edge Support complet 12Firefox Support complet 3.5IE Support complet 6Opera Support complet 9Safari Support complet 3.1WebView Android Support complet 2.2Chrome Android ? Edge Mobile Support complet 12Firefox Android Support complet 4Opera Android Support complet 12Safari iOS Support complet 3.1Samsung Internet Android Support complet Oui
unicode-rangeChrome Support complet OuiEdge Support complet OuiFirefox Support complet 36IE Support complet 9Opera Support complet OuiSafari Support complet OuiWebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 36Opera Android ? Safari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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