Règle CSS @font-face

La règle CSS @font-face est une règle qui permet aux concepteurs web de définir des polices en ligne pour afficher du texte sur leur site web. Ainsi, les concepteurs web n’auront plus besoin d’utiliser des « polices sûres pour le web ».

Nous devons d’abord définir un nom pour la police (comme myFirstFont) dans la nouvelle règle @font-face, puis indiquer le fichier de police.

Chaque navigateur a son propre format. Nous utilisons les formats ttf, otf, eot, svg, svgz, woff, woff2.

OTF / TTF

WOFF a été créé pour fournir 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 concepteurs (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 que IE8 et les versions antérieures reconnaîtront 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é de les utiliser dans de nouveaux projets. SVGZ est la version compressée de SVG.

WOFF/WOFF2

Web Open Font Format, créé pour être utilisé sur le web et développé par Mozilla avec d’autres organisations, les polices WOFF se chargent souvent plus rapidement que d’autres formats parce qu’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 prendre en compte les considérations suivantes :

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

Syntaxe

Syntaxe de la règle CSS @font-face

css

@font-face {
  font-properties
}

Exemple de la règle @font-face :

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

html

<!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>

Try it Yourself »

Compatibilité avec les navigateurs

Compatibilité la plus large possible avec les navigateurs

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

Règle @font-face

css

@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 manière suivante :

Règle CSS @font-face

css

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

Niveau pratique de compatibilité avec les navigateurs

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

Règle CSS @font-face

css

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

Compatibilité très progressive avec les navigateurs

Si nous travaillons avec WOFF, on peut s’attendre à ce que WOFF2 puisse être utilisé à un moment donné :

Règle CSS @font-face

css

@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. Cela est proposé par 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

css

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

Ensuite, elle peut être utilisée pour styliser les éléments :

Règle CSS @font-face

css

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

Un service hébergé peut avoir un avantage. Il inclura probablement toutes les variantes du fichier de police, offrant une compatibilité étendue entre navigateurs, et il n’y aura pas besoin d’héberger les fichiers nous-mêmes.

Règle CSS @font-face

css

@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 à la même ressource dans le <head> du document HTML et non dans le CSS.

HTML

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

css

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

Encore une fois, les règles @font-face sont importées, mais elles sont ajoutées dans le <head> HTML :

CSS

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

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>

Try it Yourself »

Valeurs

Descripteur de police	Valeurs	Description
font-family	name	Définit le nom de la police et c’est une exigence.
src	URL	Définit l’URL à partir de laquelle la police sera téléchargée et c’est une exigence.
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Définit comment la police sera étirée. Sa valeur par défaut est normal et c’est facultatif.
font-style	normal italic oblique	Définit le style de la police. Sa valeur par défaut est normal et c’est facultatif.
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Définit l’épaisseur de la police. Sa valeur par défaut est normal et c’est facultatif.
unicode-range	unicode-range	Définit la plage de caractères Unicode pris en charge par la police. Sa valeur par défaut est U+0-10FFFF et c’est facultatif.

Practice

What is the purpose of the @font-face rule in CSS?

To specify a custom font in your web pageTo change the background color of a websiteTo add an external style sheet to a HTML documentTo embed a font into a web pageTo control the layout of a web page

Règle CSS @font-face ​

OTF / TTF ​

EOT ​

SVG/SVGZ ​

WOFF/WOFF2 ​

Syntaxe ​

Exemple de la règle @font-face : ​

Compatibilité avec les navigateurs ​

Compatibilité la plus large possible avec les navigateurs ​

Niveau pratique de compatibilité avec les navigateurs ​

Compatibilité très progressive avec les navigateurs ​

Techniques alternatives ​

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

Valeurs ​

Practice ​

Règle CSS @font-face

OTF / TTF

EOT

SVG/SVGZ

WOFF/WOFF2

Syntaxe

Exemple de la règle @font-face :

Compatibilité avec les navigateurs

Compatibilité la plus large possible avec les navigateurs

Niveau pratique de compatibilité avec les navigateurs

Compatibilité très progressive avec les navigateurs

Techniques alternatives

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

Valeurs

Practice