Cet article convient à tous, des débutants aux développeurs Web les plus expérimentés. J’ai vu des développeurs Web seniors pendant une décennie ignorer les polices et ne pas les traiter correctement, alors lisez attentivement.

Après avoir lu quelques lignes ci-dessous, vous utiliserez le @font-face et le CSS corrects qui fonctionneront correctement sur tous les navigateurs.

Votre site Web s’affichera et fonctionnera comme il se doit sur tous les appareils.

Que sont les polices ?

Je suppose que vous le savez déjà, sinon vous ne seriez pas en train de lire cet article.

Cependant, à titre d’information, un @font-face permet d’intégrer des polices spécifiques sur un site Web sans avoir à dépendre de l’utilisateur distant qui les a installées sur son système.

Les types de polices disponibles sont : “.woff”, “.woff2”, “.ttf”, “.otf”, “.eot” et “.svg”.

  • ".woff" stands for Web Open Font Format
  • ".woff2" stands for WOFF 2.0 - Web Open Font Format
  • ".ttf", ".otf" stands for TTF/OTF - TrueType and OpenType
  • ".eot" stands for EOT - Embedded OpenType
  • ".svg" stands for SVG fonts

Chaque navigateur a son “propre” support pour ces types (malheureusement), vous devez donc en tenir compte.

Si vous voulez que vos pages aient la même apparence sur tous les appareils et navigateurs, vous avez besoin de tous les formats ci-dessus.

Comment utiliser correctement Font Face ?

Voici la partie délicate, car si vous cherchez Google à ce sujet, même les meilleurs sites Web ne vous montreront pas la dure réalité.

Comme mentionné ci-dessus, chaque navigateur a son propre support pour les polices, et si vous voulez que votre police fonctionne sur tous les navigateurs, vous devez charger les types de police nécessaires et ajuster votre CSS en conséquence.

Par exemple, si nous vérifions Mozilla , vous remarquerez ce qui suit:

1@font-face {
2  font-family: "Open Sans";
3  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
4       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
5}

Est-ce assez? Non, cela ne fonctionnera pas sur tous les navigateurs. Par exemple, cela ne fonctionnera pas du tout sous Internet Explorer.

Vous pouvez vérifier https://caniuse.com/?search=woff2 et voir par vous-même.

Un autre exemple, si nous vérifions W3 Schools :

1@font-face {
2  font-family: myFirstFont;
3  src: url(myFirstFont.woff);
4}

Est-ce correct? Toujours non, il ne supportera pas tous les navigateurs.

Afin de prendre en charge tous les navigateurs, vos types de polices et CSS chargés doivent ressembler à ceci :

 1@font-face {
 2	font-family: 'FONT';
 3	src: url('FONT.eot'); 									/* IE9 Compat Modes */
 4	src: local(''),
 5       url('FONT.eot?#iefix') format('embedded-opentype'), 	/* IE6-IE8 */
 6       url('FONT.woff2') format('woff2'), 					/* Super Modern Browsers */
 7       url('FONT.woff') format('woff'), 					/* Modern Browsers */
 8       url('FONT.ttf') format('truetype'), 					/* Safari, Android, iOS */
 9       url('FONT.svg#FONT') format('svg'); 					/* Legacy iOS */
10}

Notez les commentaires sur chaque type de police, c’est explicite. Cela prendra en charge tous les navigateurs et votre police s’affichera en conséquence.

Comment convertir et générer des types Font Face ?

Si vous développez un site Web pour un client, il vous fournira généralement un type de police. C’est soit juste le format .otf ou .ttf, ce qui n’est pas suffisant.

Vous avez besoin de tous les formats requis pour tous les navigateurs, vous devrez donc les convertir dans les types @font-face appropriés.

Heureusement pour nous, nous avons des outils en ligne pour le faire automatiquement et même générer le bon CSS pour cela (avons-nous évolué ou non).

Conversion de polices payantes/personnalisées

Je vous recommande d’utiliser Transfonter , mais vous pouvez bien sûr utiliser celui que vous voulez.

Cet outil gratuit en ligne convertira votre police et vous fournira des types de police et CSS prêts à l’emploi:

 1@font-face {
 2    font-family: 'Sample';
 3    src: url('Sample.eot');
 4    src: url('Sample.eot?#iefix') format('embedded-opentype'),
 5        url('Sample.woff2') format('woff2'),
 6        url('Sample.woff') format('woff'),
 7        url('Sample.ttf') format('truetype'),
 8        url('Sample.svg#Sample') format('svg');
 9    font-weight: normal;
10    font-style: normal;
11}

Conversion de polices gratuites/open source

Dans un autre scénario où votre client ne vous fournira pas de police payante mais plutôt une police Google gratuite, il existe également un outil pour cela: [https://google-webfonts-helper.herokuapp.com/fonts](https:/ /google-webfonts-helper.herokuapp.com/fonts).

Cet outil générera également les types et CSS nécessaires pour afficher correctement vos polices sur tous les navigateurs.

Je vous recommande fortement d’inspecter les polices résultantes dans différents navigateurs.

Comment utiliser correctement les familles de polices?

Je peux parier en toute sécurité que vous n’avez jamais utilisé la spécification de la famille de polices de manière optimale. Charger la bonne police ne suffit pas, vous devez également spécifier des polices de secours.

Les polices de secours sont utilisées lorsque la police actuelle n’est pas disponible. Cela peut se produire pour plusieurs raisons à partir d’un problème de CDN ou d’un délai d’attente du réseau.

Vous remarquerez que la plupart des CMS ont défini des polices de secours comme celles-ci:

1html {
2  font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;
3}

Est-ce suffisant? Euh, non. Malheureusement, les polices système ne sont pas les mêmes sur tous les appareils. Windows a le sien, Android a le sien, iOS aussi et ainsi de suite.

Alors que faire? Déclarez-les correctement, découvrez comment Bootstrap le fait:

 1  // Safari for OS X and iOS (San Francisco)
 2  -apple-system,
 3  // Chrome < 56 for OS X (San Francisco)
 4  BlinkMacSystemFont,
 5  // Windows
 6  "Segoe UI",
 7  // Android
 8  "Roboto",
 9  // Basic web fallback
10  "Helvetica Neue", Arial, sans-serif,
11  // Emoji fonts
12  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

En utilisant ce qui précède avec des polices personnalisées, le résultat serait :

1font-family: "CUSTOM FONT HERE", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

C’est maintenant une bonne façon de gérer les polices de secours, garantissant que votre site Web sera fluide sur tous les appareils pendant que les polices se chargent (ou ne se chargent pas du tout).

Test de la police et de la famille de polices

Ne soyez pas effrayé par le mot test, c’est un processus très simple si vous travaillez intelligemment. Vous n’avez même pas besoin d’inspecter la page manuellement pour voir quelle police a été chargée (si vous êtes paresseux).

À mesure que la technologie évolue, les outils disponibles pour les développeurs évoluent également. rendre la vie plus facile et plus facile à créer des choses.

Vérifier si votre @font-face et font-family se charge correctement est un processus très simple, voir ci-dessous.

Vérification du type de police et de la famille de polices

  1. Utilisez une extension de navigateur pour voir facilement la police utilisée par votre site:
  1. Modifiez votre page et “cassez” le @font-face, simulant un cas où votre police personnalisée ne se charge pas. Vous pouvez “casser” le chargement en modifiant le nom de la police ou l’URL, ce qui conduit à une police inexistante.
  2. Le résultat doit être la première police qui correspond à votre appareil en tant que police de secours. Par exemple, si vous êtes sur un appareil Apple, cela devrait être “-apple-system”.

Trucs et astuces

  • Utilisez la balise d’en-tête de lien HTML “preconnect” si vous chargez des polices à partir d’un CDN.
  • Sur chaque déclaration de police, ajoutez font-display: swap; pour accélérer le chargement. Cela indique au navigateur d’utiliser la police de secours pour afficher le texte jusqu’à ce que la police personnalisée soit entièrement téléchargée.
  • Chargez uniquement les polices qui sont réellement nécessaires, j’ai vu des gens charger 7 types de polices de la même police mais n’en utiliser qu’un seul.
  • Pour améliorer la vitesse de la page, préchargez la police (première ou nécessaire) en utilisant HTTP/2. Cela accélérera considérablement votre page et corrigera le Google PageSpeed “Assurez-vous que le texte reste visible pendant le chargement de la police Web”.

Voilà, j’espère que cet article vous a aidé.