Fonte externe

5

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.

@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";
}

Placer ses règles @font-face en début de fichier CSS permet de s'assurer que la police soit importée avant qu'un style y fasse référence.

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')

Convertir une fonte dans un format spécifique avec onlinefontconverter.com

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.

font-family est utilisée dans @font-face pour attribuer un nom à la police. Dans .title, font-family est utilisé afin de spécifier la police à utiliser.

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 */
}

Une police importée via @font-face devrait être fonctionnelle même si elle n'est pas installée sur votre ordinateur.

Pour en savoir plus, voir cet article MDN à propos de @font-face.

Google fonts

Depuis 2010, le site Google fonts offre plusieurs centaines de polices (+ de 850) gratuitement, hébergées directement en ligne et prêtes à être utilisées.

Lorsqu'une police intéressante est trouvée, il suffit de cliquer sur le lien bleu "+ Select this style" afin de l'ajouter à la liste des polices qui seront importées. Plusieurs fontes peuvent être ajoutées dans une même liste. Il n'est pas nécessaire d'importer chacune d'entre elles séparément.

Lorsque toutes les polices désirées sont sélectionnées, le bouton en haut à droite permet d'ouvrir le panneau d'importation.

Importation standard

La méthode standard est la méthode la plus performante et celle recommandée. Elle consiste à ajouter une balise <link> dans le <head> d'un fichier HTML.

Par exemple:

<head>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/styles/main.css">
</head>

Les balises <link> de la police doivent apparaître avant celle de votre feuille de styles. Ainsi la police sera déjà importée quand vous y ferez référence.

Importation @import

La méthode @import consiste à ajouter une balise <style> dans le <head> du fichier HTML. Cependant, cette méthode est moins performante que la méthode standard.

Par exemple:

<style>
  @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
</style>

Et voilà, les fontes sont maintenant prêtes à être utilisées comme toute police normale simplement en utilisant leurs noms spécifiés dans le bas du panneau d'importation.

Par exemple:

.title {
  font-family: 'Roboto', sans-serif;
}

Pour en savoir plus, voir cet article de Google à propos de Google fonts.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme