Apprends à utiliser des polices personnalisées sur le web avec @font-face, Google Fonts, les stratégies font-display et les piles de secours appropriées.
Par défaut, les navigateurs ne peuvent afficher que les polices installées sur le système d'exploitation de l'utilisateur. On les appelle polices système ou polices web-safe — des familles comme Arial, Times New Roman, Georgia et Courier New qui sont disponibles sur pratiquement tous les appareils.
Pour utiliser des typographies personnalisées, tu as besoin de polices web — des fichiers de police que le navigateur télécharge en même temps que ton CSS. Il existe deux approches principales :
.woff2, .woff) et les sers depuis ton propre serveur en utilisant la règle @font-face.La règle @font-face dit au navigateur : "Voici un nom de famille de police personnalisée, et voici où trouver le fichier."
/* Police auto-hébergée */
@font-face {
font-family: "MyCustomFont";
src: url("/fonts/my-font.woff2") format("woff2"),
url("/fonts/my-font.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Utilisation de la police personnalisée avec secours */
body {
font-family: "MyCustomFont", Arial, Helvetica, sans-serif;
}
/* Approche Google Fonts (dans le <head> HTML) : */
/* <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet"> */
/* Puis en CSS : */
h1 {
font-family: "Inter", sans-serif;
}Le chargement de polices personnalisées introduit une préoccupation de performance : qu'affiche le navigateur pendant le téléchargement du fichier de police ?
La propriété font-display dans @font-face contrôle ce comportement :
| Valeur | Comportement |
|---|---|
auto | Défaut du navigateur (généralement similaire à block) |
block | Cache le texte jusqu'à 3 secondes pendant le chargement, puis permute |
swap | Affiche immédiatement la police de secours, permute vers la police personnalisée une fois chargée |
fallback | Période de blocage très courte (~100ms), puis secours. Si la police se charge dans les ~3s elle permute ; sinon le secours reste |
optional | Période de blocage très courte. Le navigateur peut décider de ne pas utiliser la police personnalisée du tout sur les connexions lentes |
Bonne pratique : Utilise font-display: swap pour le texte du corps afin que les utilisateurs puissent lire le contenu immédiatement. Utilise font-display: optional pour les polices décoratives non critiques.
Fournis toujours une pile de secours — une liste de polices que le navigateur essaie dans l'ordre :
font-family: "Custom Font", system-ui, -apple-system, sans-serif;Choisis des secours avec des métriques similaires (hauteur d'x, largeur de caractère) pour minimiser le décalage de mise en page lorsque la police personnalisée se charge.
Que fait `font-display: swap` ?