CSS - Directive @font-face

Description de la directive @font-face.

@font-face définit une police de caractères personnalisée, qui pourra être téléchargée par les navigateurs. 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 pour @font-face.

Voici la syntaxe complète de @font-face. Les syntaxes détaillées sont commentées dans la suite.

Syntaxes pour font-family.

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

  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. On évitera bien sûr d'utiliser le nom d'une autre police déjà existante.

  font-family est obligatoire dans toute directive @font-face.

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

Syntaxes pour src.

• @font-face { font-family: 'Police Démo'; src: url(...) format('truetype'); }

  src indique le chemin et le nom du fichier de police à utiliser, ainsi que son format. 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.

  L'indication du format est optionnelle. S'il est précisé, le format peut être l'une des valeurs suivantes, entre apostrophes ou guillemets :
    - truetype : polices TTF.
    - opentype : polices TTF ou OTF.
    - woff : polices WOFF.
    - woff2 : polices WOFF2.
    - svg : polices SVG. ✗
    - embedded-opentype : polices EOT.

  src est obligatoire dans chaque déclaration @font-face.

• @font-face { font-family: 'Police Démo'; src: url(...) format(...), url(...) format(...); }

  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.

• @font-face { font-family: 'Police Démo'; src: local('Baskerville'), url(...) format(...); }

  La fonction local() introduit la possibilité d'utiliser une police locale, déjà existante sur la machine de l'internaute. Si cette police n'est pas trouvée, elle sera alors téléchargée à partir du fichier spécifié par url().

Syntaxes pour les attributs stylistiques.

• @font-face { font-family: 'Police démo'; src: url(...); font-stretch: normal; font-style: normal; font-variant: normal; font-weight: normal; }

  Ces attributs 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 les mêmes que celles des propriétés du même nom.

  1. Pour font-stretch, 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.
  2. Pour font-style, les valeurs sont essentiellement normal, italic, oblique, etc. Voir la propriété font-style, qui gère l'inclinaison des caractères.
  3. 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.
  4. Pour font-weight, les valeurs correspondent aux épaisseurs de graisse : normal, bold, 300, etc. Reportez-vous à la propriété font-weight, qui gère la graisse des caractères.

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. Vous y trouverez également un simulateur permettant de voir ce qui se passe lors d'un téléchargement de police long (plusieurs secondes).

Syntaxes pour font-feature-settings

Reportez-vous à la propriété font-feature-settings.

Syntaxes pour unicode-range

unicode-range définit la plage des codes pris en charge par la police. Le jeu de caractères unicode est très vaste (plus de 65000 caractères) et les 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 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.

• unicode-range: U+0000-00FF;

  Les caractères U+ suivis 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.

Exemple.

(1) Police Kleymissky par Gluk.

Prise en charge par les navigateurs.

La directive @font-face est bien reconnue par tous les navigateurs actuels.

Afficher le tableau de compatibilité (informations fournies par canIuse.com).

Voir aussi...

Polices et caractères - Propriétés.

• font : Raccourci pour définir la plupart des propriétés concernant les polices de caractères.
• font-display : Détermine le comportement du navigateur face aux polices de caractères longues à charger.
• font-family : Définit le nom de la police de caractères.
• font-feature-settings : Permet d'exploiter les fonctionnalités spécifiques des polices de caractères OTF, WOFF, etc.
• font-kerning : Ajustement du crénage entre caractères.
• font-size : Ajuste la taille des caractères.
• font-size-adjust : Définition du coefficient d'aspect de la police.
• font-stretch : Modifie l'étirement ou la compression des caractères.
• font-style : Sélectionne les styles italique ou oblique de la police de caractères.
• font-synthesis : Autorise ou non le calcul des styles manquants dans la police de caractères.
• font-variant : Raccourci permettant de définir les attributs typographiques évolués : ligatures, substitution de caractères, etc.
• font-variant-alternates : Met en œuvre la substitution de caractères (polices OTF, WOFF).
• font-variant-caps : Applique une capitalisation des caractères.
• font-variant-east-asian : Typographie spécifique aux caractères chinois ou japonais.
• font-variant-ligatures : Active ou désactive la ligature des caractères.
• font-variant-numeric : Met en œuvre les modes d'affichage des nombres évolués : fractions, numéros, etc.
• font-weight : Sélectionne une graisse pour les caractères.
• text-decoration : Choisit le soulignement, le surlignement ou la rayure du texte.
• text-decoration-color : Définit la couleur du trait de décoration.
• text-decoration-line : Type de décoration : souligné, barré, etc.
• text-decoration-style : Type de trait pour la décoration : plein, pointillé, etc.
• text-shadow : Ombrage du texte.
• text-transform : Casse du texte (minuscules, majuscules...).

Polices et caractères - Directives.

• @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
• @font-feature-values : Définit les variantes typographiques à utiliser.