La règle CSS @font-face

La règle CSS @font-face vous permet de charger une police personnalisée depuis un fichier que vous hébergez (ou un service web) et de l'utiliser n'importe où dans votre feuille de style. Cela signifie que vous n'êtes plus limité aux quelques polices « web-safe » installées sur la machine de chaque visiteur.

Cette page couvre les formats de police que vous pouvez servir, comment écrire une déclaration @font-face robuste avec des alternatives, la propriété font-display qui contrôle le comportement de chargement, les descripteurs de police disponibles, et l'alternative d'utiliser un service hébergé comme Google Fonts.

Fonctionnement de @font-face

Une règle @font-face fait deux choses :

Elle définit un nom pour la police avec le descripteur font-family (par exemple, myFirstFont).
Elle pointe vers un ou plusieurs fichiers de police avec le descripteur src.

Une fois déclarée, vous référencez la police par ce nom dans n'importe quelle règle font-family normale, exactement comme vous le feriez avec une police système :

@font-face {
  font-family: 'myFirstFont';
  src: url('myfirstfont.woff2') format('woff2');
}

p {
  font-family: 'myFirstFont', sans-serif;
}

Terminez toujours la pile font-family avec une police générique de secours (comme sans-serif) pour que le texte reste lisible si le fichier de police ne se charge pas.

Formats de police

Les navigateurs prennent en charge plusieurs formats de fichiers de police : ttf, otf, eot, svg, svgz, woff et woff2. Pour le web moderne, vous n'avez besoin que de WOFF2 (avec WOFF comme alternative pour les navigateurs plus anciens) ; les autres sont des formats hérités.

OTF-TTF

WOFF a été créé pour offrir une alternative compressée et optimisée pour le web aux polices OpenType et TrueType, réduisant la taille des fichiers et le temps de chargement. Cependant, les fonctionnalités OpenType peuvent intéresser de nombreux designers (comme les ligatures).

EOT

Le format Embedded Open Type, créé par Microsoft (les innovateurs originaux de @font-face) il y a plus de 15 ans, est le seul format qu'IE8 et les versions inférieures reconnaissent lors de l'utilisation de @font-face.

SVG/SVGZ

Scalable Vector Graphics (Font) est un format de police vectorielle. Cependant, les polices SVG ont été dépréciées et supprimées de tous les navigateurs modernes. Il n'est plus recommandé pour une utilisation dans de nouveaux projets. SVGZ est la version compressée de SVG.

WOFF/WOFF2

Le format Web Open Font Format, créé pour une utilisation sur le web et développé par Mozilla avec d'autres organisations, les polices WOFF se chargent souvent plus rapidement que les autres formats car elles utilisent une version compressée de la structure utilisée par les polices OpenType (OTF) et TrueType (TTF). WOFF2 est la nouvelle génération de WOFF et offre une meilleure compression.

Lors de l'utilisation de polices personnalisées, nous devons tenir compte des considérations suivantes :

La taille du fichier. Il est recommandé d'utiliser des options qui ont des versions plus légères.
Les limitations du jeu de caractères. Vous pouvez limiter les ensembles de polices pour charger uniquement les polices utilisées.
Les polices système pour les petits écrans. L'une des solutions consiste à cibler les grands écrans lorsque la police personnalisée est chargée avec @media.

Syntaxe

Syntaxe de la règle CSS @font-face

@font-face {
  font-properties
}

Exemple de la règle @font-face :

Exemple de la règle CSS @font-face avec les formats EOT, TTF, SVG, WOFF et WOFF2

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      @font-face {
        font-family: 'myFont';
        src: url('webfont.woff2') format('woff2'),
             url('webfont.woff') format('woff'),
             url('webfont.ttf') format('truetype'),
             url('webfont.eot') format('embedded-opentype');
        font-display: swap;
      }
      div {
        font-family: myFont, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Essayez vous-même »

Contrôler le chargement avec font-display

Pendant le téléchargement d'une police web, le navigateur doit décider quoi afficher. Le descripteur font-display contrôle ce compromis entre un flash de texte invisible (FOIT) et un flash de texte sans style (FOUT) :

auto — le comportement par défaut du navigateur (généralement similaire à block).
block — masque le texte brièvement (jusqu'à ~3s), puis affiche la police web. Provoque un FOIT.
swap — affiche immédiatement le texte de secours, puis le remplace par la police web une fois chargée. Idéal pour le corps du texte car le contenu n'est jamais invisible.
fallback — une courte période de blocage, puis la police de secours ; la police web ne remplace que si elle arrive rapidement.
optional — comme fallback, mais le navigateur peut complètement ignorer la police web sur les connexions lentes.

swap est le choix le plus courant et est utilisé dans tous les exemples ci-dessous.

Compatibilité navigateur

Compatibilité navigateur la plus large possible

C'est la méthode offrant la compatibilité la plus large. Avant tout style, nous devons ajouter la règle @font-face à la feuille de style.

Règle @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'),
       url('webfont.woff') format('woff'),
       url('webfont.ttf') format('truetype'),
       url('webfont.eot') format('embedded-opentype');
  font-display: swap;
}

Ensuite, elle est utilisée pour styliser les éléments de la façon suivante :

Règle CSS @font-face

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Niveau pratique de compatibilité navigateur

Puisque WOFF et WOFF2 sont couramment utilisés, nous pouvons utiliser ce qui suit :

Règle CSS @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff');
  font-display: swap;
}

Compatibilité navigateur super progressive

Si nous travaillons avec WOFF, il est possible que WOFF2 soit utilisable à un moment donné :

Règle CSS @font-face

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

Techniques alternatives

Dans certaines situations, il peut être préférable d'utiliser une police hébergée. C'est ce que propose Google Fonts comme moyen d'utiliser leurs polices. Dans le code suivant, @import est utilisé pour charger une police depuis Google Fonts :

Règle CSS @font-face

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Elle peut ensuite être utilisée pour styliser les éléments :

Règle CSS @font-face

body {
  font-family: 'Open Sans', sans-serif;
}

Un service hébergé peut présenter un avantage. Il inclura probablement toutes les variantes du fichier de police offrant une compatibilité inter-navigateurs étendue, et il ne sera pas nécessaire d'héberger les fichiers nous-mêmes.

Règle CSS @font-face

@import url(//fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

De la même manière, une feuille de style peut être liée au même asset dans le <head> du document HTML et non dans le CSS.

HTML

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Ensuite, les éléments peuvent être stylisés comme avec les autres méthodes :

CSS

body {
  font-family: 'Open Sans', sans-serif;
}

De même, les règles @font-face sont importées mais elles sont ajoutées dans le <head> HTML :

CSS

body {
  background: #efefef;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 50px;
}

h1 {
  font-size: 30px;
  line-height: 45px;
  font-family: 'Open Sans', sans-serif;
}

Exemple de la règle @font-face utilisant Google Fonts :

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link href="https://fonts.googleapis.com/css?family=Courier+Prime:400,700&display=swap" rel="stylesheet" />
    <style> 
      h2{
      font-family: 'Courier Prime', monospace;
      font-weight:700;
      }
      div {
      font-family: 'Courier Prime', monospace;
      }
      p{
      font-family: 'Courier Prime', monospace;
      }
    </style>
  </head>
  <body>
    <h2>@font-face example</h2>
    <div>
      The @font-face CSS at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's computer. If the local() function is provided, specifying a font name to look for on the user's computer, and the user agent finds a match, that local font is used. Otherwise, the font resource specified using the url() function is downloaded and used.
    </div>
    <p>
      The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.
    </p>
  </body>
</html>

Essayez vous-même »

Valeurs

Descripteur de police	Valeurs	Description
font-family	name	Il définit le nom de la police et est obligatoire.
src	URL	Il définit l'URL depuis laquelle la police sera téléchargée et est obligatoire.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Il définit comment la police sera étirée. Sa valeur par défaut est normal et est optionnel.
font-style	normal italic oblique	Il définit comment la police sera stylisée. Sa valeur par défaut est normal et est optionnel.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Il définit l'épaisseur de la police. Sa valeur par défaut est normal et est optionnel.
unicode-range	unicode-range	Il définit la plage de caractères unicode que la police prend en charge. Sa valeur par défaut est U+0-10FFFF et est optionnel.

Utilisation de local() dans src

Dans src, vous pouvez lister local('Font Name') avant les entrées url(). Le navigateur utilisera une police correspondante déjà installée sur la machine de l'utilisateur et ne téléchargera le fichier que si aucune n'est trouvée, économisant ainsi de la bande passante :

@font-face {
  font-family: 'MyWebFont';
  src: local('My Web Font'),
       url('mywebfont.woff2') format('woff2');
  font-display: swap;
}

Chapitres connexes

@import — inclure une autre feuille de style, y compris un CSS de police hébergée.
@media — charger des polices personnalisées de manière conditionnelle, par exemple uniquement sur les grands écrans.
font-family, font-weight et font-style — appliquer la police que vous avez définie.

Exercice

Pratique

Quel est l'objectif de la règle @font-face en CSS ?

Spécifier une police personnalisée dans votre page webChanger la couleur d'arrière-plan d'un site webAjouter une feuille de style externe à un document HTMLIntégrer une police dans une page webContrôler la mise en page d'une page web