Formation Apprendre le CSS : Police personnalisées

Dans ce chapitre, on va découvrir comment charger des polices personnalisées dans notre site. C'est souvent une étape obligatoire dans l'intégration d'une maquette car les designers utilisent souvent des polices bien précises pour donner une identité visuelle au projet.

Le problème, c'est que ces polices ne sont pas forcément installées sur l'ordinateur des visiteurs. Si on veut les utiliser, il faut les fournir au navigateur et c'est précisément le rôle de @font-face.

Le principe de @font-face

@font-face permet de déclarer une police personnalisée que l'on pourra ensuite utiliser dans nos règles CSS classiques avec font-family.

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

Une fois cette police déclarée, on peut l'utiliser comme n'importe quelle autre police :

.hero-title {
  font-family: "JetBrains Mono", sans-serif;
}

Dans une déclaration @font-face, il y a surtout deux propriétés à retenir :

• font-family
• src

font-family

Cette propriété permet de donner un nom à la police.

font-family: "JetBrains Mono";

C'est ce nom que l'on réutilisera ensuite dans les autres sélecteurs CSS.

src

src indique où trouver la police.

On peut utiliser plusieurs sources :

• une police déjà installée sur le système (local())
• un ou plusieurs fichiers à charger sur le web (url())

Par exemple :

@font-face {
  font-family: "JetBrains Mono";
  src:
    local("JetBrains Mono"),
    url("./fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

Ici, le navigateur essaie d'abord de trouver la police localement. Si elle n'est pas disponible, il télécharge le fichier web.

Dans la documentation, on voit souvent plusieurs fichiers de police avec différents formats. Historiquement, tous les navigateurs ne supportaient pas les mêmes formats. C'est pour cela qu'on pouvait fournir plusieurs variantes. Aujourd'hui, le format que l'on privilégie généralement est woff2 qui est un format pensé pour le web, très bien compressé et largement supporté par les navigateurs modernes.

Gérer plusieurs graissages

Une police n'existe pas forcément sous une seule forme. On a souvent :

• une version normale
• une version medium
• une version bold

Si on veut que le navigateur sache quelle version charger selon le font-weight, il faut déclarer plusieurs @font-face.

Par exemple :

@font-face {
  font-family: "JetBrains Mono";
  src:
    local("JetBrains Mono"),
    url("./fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: "JetBrains Mono";
  src:
    local("JetBrains Mono"),
    url("./fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
}

Ainsi, le navigateur peut charger automatiquement la bonne variante selon les règles CSS utilisées plus loin dans le site.

h1 {
  font-family: "JetBrains Mono";
  font-weight: 700;
}

La propriété font-display

Un problème se pose lorsqu'on charge une police web : elle n'arrive pas instantanément.

Pendant que la police se télécharge, le navigateur doit décider quoi faire :

• attendre la vraie police, en n'affichant aucun texte.
• afficher le texte avec une police de secours, en attendant la bonne police.

C'est là qu'intervient font-display.

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

Les comportements possibles

Les valeurs les plus courantes sont :

• auto, le navigateur choisit lui-même le comportement.
• block, le navigateur attend un peu avant d'afficher quoi que ce soit. Pendant ce laps de temps, le texte peut être invisible.
• swap, le navigateur affiche immédiatement une police de secours, puis remplace le texte par la vraie police dès qu'elle est disponible.

En pratique, c'est souvent cette dernière valeur que l'on privilégie :

font-display: swap;

Cela évite d'avoir une zone vide ou un texte invisible pendant le chargement.

Les services tiers

Dans la pratique, on n'a pas toujours besoin de gérer les fichiers de polices manuellement et on peut se reposer sur des services tiers :

• Google font, le plus connu
• Font bunny, une alternative respectueuse de la vie privée

Le principe est simple :

1. on choisit une police
2. on sélectionne les graissages nécessaires
3. on récupère un code à intégrer dans le HTML

Par exemple, Google Fonts fournit un code du type :

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap"
  rel="stylesheet"
/>

Une fois ce code ajouté dans le <head>, on peut utiliser la police directement :

.hero {
  font-family: "Manrope", sans-serif;
}