@font-face

Par défaut, le choix de polices natives compatibles sur tous les appareils est relativement limité. Heureusement, il est possible d'importer des polices externes afin de contourner cette limitation via @font-face.

La règle @font-face permet d'importer une police sur une page en spécifiant où la police est située et sous quel nom y faire référence.

@font-face {
  src: url("/polices/bebas.woff2") format("woff2");
  font-family: "Bebas";
}

src

La propriété src dans cet exemple indique au navigateur que la police se nomme bebas.woff2 et se trouve dans un dossier intitulé polices.

format

format est un complément à src. Il permet au navigateur de connaître le format de la police et de savoir s'il est en mesure de le supporter.

Voici une liste des extensions de polices les plus fréquentes et leur format associés:

FICHIER	FORMAT
bebas.woff2	format('woff2')
bebas.woff	format('woff')
bebas.ttf	format('truetype')
bebas.otf	format('opentype')
bebas.eot	format('eot')
bebas.svg	format('svg')

font-family

La propriété font-family, à l'intérieur d'une règle @font-face, permet de spécifier le nom attribué à la police importée. Ce nom sera ensuite utilisé afin de faire référence à la police.

Il est conseillé d'utiliser le nom de la police afin d'éviter toute confusion, comme dans l'exemple précédent, la police est simplement nommée "Bebas" comme son fichier (bebas.woff2). Néanmoins, ce nom pourrait théoriquement être n'importe quoi.

Par exemple "Super police":

@font-face {
  src: url("/polices/bebas.woff2") format("woff2");
  font-family: "Super Police";
}

Utilisation

Une fois importée, la police peut être utilisée sur différents éléments.

Par exemple:

@font-face {
  src: url("/polices/bebas.woff2") format("woff2");
  font-family: "Bebas";
}

...

.title {
  font-family: "Bebas";
}

Dans cet exemple, les éléments avec la classe .title utilisent la police Bebas.

Substitution

Puisque les navigateurs ne supportent pas tous les mêmes formats de police, il est courant que plusieurs sources soient fournies. Dans ce cas, le navigateur utilisera le premier format de police compatible rencontré.

Par exemple:

@font-face {
  font-family: "Ma police";
  src: url("/polices/bebas.woff2") format("woff2"),
       url("/polices/bebas.otf") format("opentype");
}

Variations

Si une police contient plusieurs fichiers, chacun de ces fichiers correspond à une variation de la police. Par exemple, normal, italique, gras (bold), etc. Dans ce cas, il est nécessaire de définir une règle @font-face pour chacun des fichiers.

Pour chacune de ces règles, la propriété font-family doit être la même puisqu'il s'agit de la même police. Cependant, une propriété supplémentaire, telle que: font-style ou font-weight doit être ajoutée afin d'indiquer la variation en question. Si aucune propriété supplémentaire n'est spécifiée, le navigateur conclura qu'il s'agit du style par défaut (normal), de la police.

Par exemple:

@font-face {
  src: url("/polices/bebas-400.woff2") format("woff2");
  font-family: "Bebas";
}

@font-face {
  src: url("/polices/bebas-700.woff2") format("woff2");
  font-family: "Bebas";
  font-weight: bold; /* 👈 Variation spécifiée */
}