CSS - 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.
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
(T
rueT
ypeF
ont).OTF
(O
penT
ypeF
ont).WOFF
(W
ebO
penF
ontF
ormat).
D'autres formats de polices sont également reconnus, mais par certains navigateurs seulement :
WOFF2
(W
ebO
penF
ontF
ormat version 2).SVG
(S
calableV
ectorG
raphics).EOT
(E
mbeddedO
penT
ype).
Voici un exemple de syntaxe :
@font-face {
font-family: 'nom de la police';
src: url('chemin/fichier.ttf');
}
Cette police peut ensuite être utilisée comme n'importe quelle police standard :
font-family:'nom de la police';
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 :
@font-face {
font-family:'Ma Police';
src:url('chemin/police-regular.ttf');
}
@font-face {
font-family:'Ma Police';
src:url('chemin/police-bold.ttf');
font-weight:bold;
}
@font-face {
font-family:'Ma Police';
src:url('chemin/police-italic.ttf');
font-style:italic;
}
Syntaxes pour @font-face
.
Voici la syntaxe complète de @font-face
. Les syntaxes détaillées sont commentées
dans la suite.
@font-face {
font-family: 'Ma Police';
src: url('chemin/police.ttf') format('truetype');
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
font-feature-settings: normal;
font-variation-settings: normal;
font-display: swap;
unicode-range: U+00-FF;
}
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é pourfont-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é parurl()
.
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.
- Pour
font-stretch
, les valeurs possibles sontnormal
,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 sont essentiellementnormal
,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
,300
, etc. Reportez-vous à la propriétéfont-weight
, qui gère la graisse des caractères.
- Pour
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: 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 entre0000
et00FF
.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 entre0000
et00FF
.unicode-range: U+0000-00FF, U+0130-0140;
Plusieurs plages de caractères peuvent être énumérées, séparées par des virgules.
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.
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.