@font-face - Directive CSS

Description de la directive @font-face.

@font-face est une directive du langage CSS. Son rôle est de fournir au navigateur Web toutes les informations nécessaires au téléchargement des polices personnalisées utilisées sur la page.

Il est donc maintenant possible d'utiliser des polices spéciales ou fantaisie, tout en étant certain que la restitution sera fidèle.

Les formats de polices reconnus par tous les navigateurs sont :

• TTF (True Type Font).
• OTF (Open Type Font).
• WOFF (Web Open Font Format).

D'autres formats de polices sont également reconnus, mais par certains navigateurs seulement :

• WOFF2 (Web Open Font Format version 2).
• SVG (Scalable Vector Graphics).
• EOT (Embedded Open Type).

Voici un exemple de syntaxe :

Cette police peut ensuite être utilisée comme n'importe quelle police standard :

Il est possible de définir les attributs de base de la police fournie. Attention ! On ne modifie pas la police mais on déclare que, dans le fichier fourni, les caractères ont tel ou tel attribut. Par exemple on déclare que le fichier correspond à une police en caractères gras. Dans ce cas, il est nécessaire de disposer de plusieurs fichiers pour une même police : la version en caractères standard, la version en caractères gras, etc.

Exemple :

Syntaxes de la directive @font-face.

Voici la syntaxe complète de @font-face. Les syntaxes détaillées sont commentées dans la suite.
Les descripteurs font-family et src sont obligatoires. Les autres sont optionnels mais nécessaires dans de nombreux cas.

Syntaxes du descripteur font-family.

• @font-face { ... font-family: 'Police Démo'; ... }

  font-family est obligatoire dans toute directive @font-face. La syntaxe est très simple et ne propose pas de variantes.
  

  font-family déclare le nom qui sera donné à cette police téléchargée. Celui qui sera utilisé plus tard avec la propriété du même nom (font-family). Il n'est pas nécessaire que ce nom soit le vrai nom de la police (celui qui est défini dans le fichier de la police). Si ce nom entre en conflit avec celui d'une police existante sur l'ordinateur, la police existante est remplacée par cette nouvelle police. Ce fonctionnement garanti que la police affiché sera toujours celle qui est prévue, même si, sur certaines machines, une autre police du même nom est installée.

  Lorsque plusieurs variantes stylistiques existent dans des fichiers séparés pour une même police, il est nécessaire de charger tous ou plusieurs de ces fichiers. Il faut autant de directives @font-face, qui auront toutes le même nom déclaré pour font-family.

Syntaxes pour le descripteur src.

src est obligatoire dans chaque déclaration @font-face. Description des paramètres :

• url est un chemin vers un fichier de police.
• format est un format de police, comme truetype, woff, etc.
• tech est une technologie, comme incremental-range, color-COLRv1, etc.
  Plusieurs technologies peuvent être spécifiées, séparées par des virgules.
• local est le nom d'une police locale. Dans ce cas il n'y a pas téléchargement de fichier.

• @font-face { ... src: url(...); ... }

  src indique le chemin et le nom du fichier de police à utiliser. Le chemin peut être absolu ou relatif.

  Dans le cas d'un chemin absolu, il faut savoir que le fichier de police doit être situé sur le même domaine que la page web qui l'utilise. En effet les restrictions d'origine s'appliquent également aux polices de caractères (SOP). Bien sûr un serveur peut contourner cette restriction en le déclaration dans les en-tête http. C'est ce que fait le serveur Google Fonts, ce qui dispense d'héberger les fichiers de police sur son propre serveur.

  Si le chemin est indiqué en relatif, ce sera par rapport à l'emplacement du fichier où se trouve la déclaration @font-face.

• @font-face { ... src: url(...) format('truetype'); ... }

  L'indication du format est optionnelle. S'il est précisé, le format peut être l'une des valeurs suivantes, entre apostrophes ou guillemets :

  • collection : fichier contenant plusieurs polices.
  • truetype : polices TTF.
  • opentype : polices TTF ou OTF.
  • woff : polices WOFF.
  • woff2 : polices WOFF.
  • svg : polices SVG. ✗
  • embedded-opentype : polices EOT.
• @font-face { ... src: url(...) tech(t1, t2...); ... }

  Cette syntaxe permet de spécifier une ou plusieurs fonctionnalités techniques associées à la police. Si plusieurs sont spécifiées entre les parenthèses de la fonction tech, elles seront séparées par des virgules.

  • variations
  • palettes
  • incremental-patch
  • incremental-range
  • incremental-auto
  • features-opentype
  • features-aat
  • features-graphite
  • color-COLRv0
  • color-COLRv1
  • color-SVG
  • color-sbix
  • color-CBDT
• @font-face { ... src: url(...) format(...), url(...), local('police'); ... }

  Dans cet exemple plusieurs sources ont été définies pour le téléchargement du fichier de police. Les groupes (url format ) sont séparés par des virgules. L'indication du format est optionnelle. Le navigateur traitent les sources dans l'ordre où elles sont écrites, jusqu'à ce que l'un des fichiers soit disponible et correct.

  La fonction local() introduit la possibilité d'utiliser une police locale, déjà existante sur la machine de l'utilisateur. Les polices génériques (serif, monospace, etc.) ne sont pas admises avec local().

Syntaxes pour le descripteur font-size.

• length1 et length2 sont deux valeurs numériques suivies d'une des unités de dimension des caractères, la plupart du temps une unité plus spécifique à la taille des caractères, mais toutes les unités de dimension sont acceptées.

• @font-face { ... font-size: auto; ... }

  La police déclarée par cette directive @font-face peut être utilisée pout toutes les tailles de caractères.

• @font-face { ... font-size: 12px; ... }

  La police déclarée par cette directive @font-face ne peut être utilisée que pour la taille spécifiée.

• @font-face { ... font-size: 12px 18px; ... }

  La police déclarée par cette directive @font-face peut être utilisée pour toutes les tailles de caractères comprises entre ces deux valeurs.

Syntaxes pour le descripteur size-adjust.

• @font-face { ... size-adjust: 75%; ... }

  Le pourcentage indiqué est une valeur positive.

  Ce descripteur permet d'homogénéiser les caractéristiques des polices : le pourcentage indiqué est appliqué à toutes les dimensions des caractères, sauf la taille proprement dite. Les largeurs de caractères, l'avance, etc. sont donc modifiées, ainsi que les unités qui en découlent : ex, ch, etc. Par contre, les unités liées directement de la taille des caractères ne sont pas changées : em, rem, etc.

Syntaxes pour les attributs stylistiques.

• @font-face { ... font-width: normal; font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; ... }

  Ces descripteurs stylistiques décrivent la police. Ils ne modifient en rien les caractères comme le feraient les propriétés du même nom, mais déclarent simplement que, dans ce fichier, les caractères ont telle ou telle caractéristique (par exemple ils sont en gras, ou en italique).

  Les valeurs possibles sont à peu près les mêmes que celles des propriétés du même nom.

  • font-width et font-stretch sont synonymes. Les valeurs possibles sont normal, expanded, condensed, etc. Voir la propriété font-stretch, qui gère l'étirement ou la compression des caractères.
  • Pour font-style, les valeurs possibles sont normal, italic, oblique, etc. Voir la propriété font-style, qui gère l'inclinaison des caractères.
  • Pour font-variant, de nombreuses valeurs sont possibles : normal, small-caps, etc. Reportez-vous à la propriété font-variant, qui gère la casse des caractères.
  • Pour font-weight, les valeurs correspondent aux épaisseurs de graisse : normal, bold, de 100 à 900. Les valeurs relatives lighter et bolder n'ont pas de sens ici avec le descripteur. Reportez-vous à la propriété font-weight, qui gère la graisse des caractères.

  Lorsque les valeurs sont numériques, deux valeurs peuvent être indiquées. Elles correspondent alors à un minimum et un maximum.
  Par exemple, font-weight:300 500; signifie que ce fichier de police peut générer des caractères dans une graisse allant de 300 à 500.

Syntaxes pour font-display.

font-display décrit comment les navigateurs doivent gérer le temps de chargement de la police et/ou la non disponibilité de celle-ci. Faut-il afficher le texte dans une police de remplacement ? Au bout de combien de temps ? Etc.

Reportes-vous à cette page pour une description détaillée de font-display.

Syntaxes pour font-feature-settings

Reportez-vous à la propriété font-feature-settings pour connaître les valeurs possibles pour ce descripteur.

Syntaxes pour font-variation-settings

Reportez-vous à la propriété font-variation-settings pour connaître les valeurs possibles pour ce descripteur.

Syntaxes pour ascent-override, descent-override et line-gap-override.

• @font-face { ... ascent-override:normal; descent-override:normal; line-gap-override:normal; ... }

  Ces trois descripteurs définissent respectivement la hauteur des caractères au dessus de la ligne de base, la hauteur de ces caractères en dessous de la ligne de base, et l'interligne de la police de caractères. La valeur spécifiée peut être normal, ou un pourcentage.
  Dans le cas d'une écriture suivant l'axe vertical, un deuxième pourcentage peut être indiqué.

Syntaxes pour la gestion des indices et exposants.

• @font-face { ... superscript-position-override:normal; subscript-position-override:normal; superscript-size-override:normal; subscript-size-override:normal; ... }

  Ces quatre descripteurs définissent la position et la taille des exposants et des indices. Les valeurs acceptées sont normal, from-font, ou bien un pourcentage.
  Un deuxième pourcentage peut être indiqué, il sera utilisé pour les textes en écriture verticale.

Syntaxes pour unicode-range

Le descripteur unicode-range définit la plage des codes UTF inclus dans le fichier de police. Le jeu de caractères Unicode est très vaste (plus de 65000 caractères) et la plupart des polices ne proposent pas tous les caractères. unicode-range évite les chargements de fichier inutiles : le navigateur est censé vérifier que le caractère dont il a besoin existe bien dans le fichier de la police.

Certains fichiers de police sont d'ailleurs segmentés : un fichier pour les caractères latins, un autre pour les symboles mathématiques, un autre pour les caractères grecs, etc. Si unicode-range est correctement renseigné, le navigateur peut décider quel fichier lui est nécessaire et ne télécharger que celui-ci.

• @font-face { ... unicode-range: U+0000-00FF; ... }

  La lettre U suivie de + et de deux nombres hexadécimaux séparés par un tiret. Cette notation indique que la police propose tous les caractères dont le code hexadécimal est compris entre 0000 et 00FF.

  Les nombres hexadécimaux ne doivent pas comporter plus de six digits.

• unicode-range: U+00??;

  Le caractère ? replace un digit hexadécimal. Cette notation est donc équivalente à la précédente et désigne une plage de codes entre 0000 et 00FF.

• unicode-range: U+0000-00FF, U+0130-0140;

  Plusieurs plages de caractères peuvent être énumérées, séparées par des virgules.

Exemples d'utilisation de la directive @font-face.

(1) Police Kleymissky par Gluk.

Compatibilité des navigateurs avec la directive @font-face.

La directive @font-face en elle même est bien reconnue par tous les navigateurs actuels. Cependant le support des polices SVG laisse encore à désirer.

1

Directive
@font-face

2

Descripteur
size-adjust

3

Police
WOFF

4

Police
WOFF2

5

Police
SVG

Estimation de la prise en charge globale.

96%

91%

96%

95%

17%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Caniuse

Caniuse

Évolution de la directive @font-face.

• Module CSS - Polices de caractères - Niveau 3

  Première définition de la descriptive @font-face.
  

  21 Juillet 1997

  Document de travail.

  

  03 Octobre 2013

  Candidat à la recommandation.

  

  14 Août 2018

  Proposé à la recommandation.

  

  20 Septembre 2018

  Recommandation.

• Module CSS - Polices de caractères - Niveau 4

  Introduction du descripteur font-display pour contrôler la restitution pendant le temps de téléchargement des polices.
  

  11 Juillet 2017

  Document de travail.

  

  

  

• Module CSS - Polices de caractères - Niveau 5

  Pas de modification concernant cette directive.
  

  29 Juin 2021

  Document de travail.

  

  

  

Voir aussi, au sujet des polices de caractères.

La directive @font-face est décrite dans la spécification "Module CSS - Polices de caractères" (CSS Fonts Module).
Ces autres définitions sont également présentées dans ce même module.

Propriétés :

Fonctions :

Directives :

Descripteurs :