CSS @font-face

@font-face est la règle CSS at-rule qui indique au navigateur où trouver un fichier de police et comment le nommer. Elle était d'abord prise en charge dans IE 4 en 1997, mais n'est devenue pratique sur tous les navigateurs qu'autour de 2010 lorsque WOFF est arrivé et que les autres navigateurs ont implémenté la règle de manière cohérente.

Pour les polices d'icônes, @font-face est le liant entre vos fichiers de polices et les classes CSS qui affichent les icônes. Sans elle, le navigateur n'a aucun moyen de savoir que font-family: 'MyIcons' doit charger un fichier spécifique depuis votre serveur.

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Le descripteur font-family donne à la police un nom que vous référencerez ultérieurement. Le descripteur src indique au navigateur où télécharger le fichier et dans quel format il se trouve. Les descripteurs font-weight et font-style garantissent que le navigateur n'essaie pas de synthétiser des variantes grasses ou italiques. Et font-display contrôle ce qui se passe pendant le chargement de la police.

L'indication format() après chaque URL indique au navigateur dans quel format se trouve le fichier, afin qu'il puisse ignorer les formats qu'il ne prend pas en charge sans les télécharger. Au fil des années, l'ensemble de formats recommandés s'est considérablement réduit à mesure que la prise en charge des navigateurs s'est améliorée.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

Avec une couverture de 97 %+ des navigateurs, WOFF2 seul est suffisant pour la grande majorité des projets modernes. C'est l'approche la plus simple et la plus performante.

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

L'ajout de WOFF comme solution de repli couvre IE 11, qui ne prend pas en charge WOFF2. Les navigateurs modernes utiliseront le fichier WOFF2 ; IE 11 se repliera sur WOFF.

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 compat */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

La pile « pare-balle » complète inclut EOT pour IE 6-8, WOFF2 pour les navigateurs modernes, WOFF pour IE 9-11, et TTF comme solution de repli finale. Le navigateur essaie chaque entrée src dans l'ordre et utilise le premier format qu'il comprend. Cette approche n'est nécessaire que pour les projets avec des exigences héritées extrêmes.

Le modèle standard pour les polices d'icônes utilise une classe de base qui définit la famille de polices et les styles de rendu partagés, puis des classes d'icônes individuelles qui utilisent des pseudo-éléments ::before avec content défini sur le point de code Unicode de chaque icône.

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

La classe de base réinitialise le style de police pour empêcher le navigateur d'appliquer des transformations gras, italique ou autres qui déformeraient les icônes. Les propriétés -webkit-font-smoothing et -moz-osx-font-smoothing activent l'anticrénelage pour un rendu plus net sur macOS et iOS.

Chaque classe d'icône définit un pseudo-élément ::before avec le point de code Unicode attribué à ce glyphe. La notation barre oblique inverse-E (\E001) est la façon dont CSS référence un caractère Unicode par son point de code hexadécimal.

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

Les deux <i> et <span> fonctionnent également bien. L'élément lui-même est vide — l'icône est rendue entièrement par le pseudo-élément ::before.

Le descripteur font-display contrôle ce que le navigateur affiche pendant le téléchargement du fichier de police. C'est essentiel pour les polices d'icônes car un mauvais réglage peut rendre les icônes invisibles lors du chargement de la page.

Pour les polices d'icônes, swap est le choix recommandé. Un bref flash de contenu non stylisé (où les points de code d'icônes pourraient apparaître sous forme de carrés ou d'espaces vides) est bien préférable aux icônes invisibles. Avec block, les utilisateurs pourraient voir un espace vide là où les icônes devraient être pendant jusqu'à 3 secondes sur des connexions lentes — ce qui ressemble à une page cassée. Avec swap, les icônes apparaissent dès que la police se charge, et la transition est généralement imperceptible sur les connexions modernes.

Les fichiers de polices bloquent le rendu par défaut — le navigateur ne peindra pas le texte en utilisant une police personnalisée tant que le fichier n'a pas été téléchargé. Voici des techniques pour minimiser l'impact :

• Préchargez le fichier de police — utilisez <link rel="preload"> pour commencer à télécharger la police le plus tôt possible, avant même que le navigateur n'analyse le CSS qui la référence.
• Hébergez vos polices vous-même — servir les fichiers de polices depuis la même origine que votre HTML évite les recherches DNS supplémentaires et la configuration de connexion, et élimine les problèmes CORS.
• Créez un sous-ensemble de votre police — supprimez les icônes inutilisées pour réduire la taille du fichier. Une police de 500 icônes où vous n'en utilisez que 50 gaspille 90 % du téléchargement.
• Utilisez unicode-range — si vous avez plusieurs ensembles d'icônes, ce descripteur indique au navigateur de ne télécharger le fichier de police que lorsque des caractères dans la plage spécifiée sont effectivement utilisés sur la page.

<link rel="preload" href="fonts/myicons.woff2" as="font"
      type="font/woff2" crossorigin>

L'attribut crossorigin est requis même pour les polices de même origine — c'est une particularité de la spécification de chargement des polices. Sans lui, le navigateur téléchargera la police deux fois : une fois depuis l'indication de préchargement (sans CORS) et une fois depuis la règle @font-face (avec CORS).

• Erreurs CORS — les fichiers de polices servis depuis une origine différente (par exemple, un sous-domaine CDN) nécessitent des en-têtes Access-Control-Allow-Origin sur le serveur. Alternativement, utilisez l'attribut crossorigin sur la balise <link>. Sans une configuration CORS correcte, le navigateur bloquera silencieusement la police.
• Icônes affichées sous forme de carrés ou rectangles — cela signifie généralement que le chemin vers le fichier de police est incorrect, que la police n'a pas encore été chargée, ou que le nom font-family dans la classe d'icône ne correspond pas au nom dans la déclaration @font-face. Vérifiez l'onglet Réseau de votre navigateur pour confirmer que le fichier de police s'est chargé avec un statut 200.
• Icônes affichant des glyphes incorrects — conflits de points de code Unicode avec les polices système. Si votre police d'icônes utilise des points de code dans des plages qui se chevauchent avec les polices système courantes, le navigateur pourrait rendre un caractère système à la place. Les polices d'icônes utilisent généralement la zone d'utilisation privée (U+E000 à U+F8FF) pour éviter cela.