Optimiser le chargement des webfonts

Nous voici de retour dans cette série d’articles liés à la web performance. Cette semaine, je vous propose de se concentrer sur les polices d’écriture. C’est souvent un élément essentiel de la charte graphique de votre site web. C’est aussi un élément qui peut ruiner vos performances s’il n’est pas bien géré.

Nous allons donc voir dans cet article les différentes configurations possibles et ce qu’il est pertinent de gérer pour améliorer au maximum la performance ressentie par vos utilisateurices.

Si vous ressentez le besoin d’avoir plus d’accompagnement dans votre entreprise pour mettre en place ces sujets, n’hésitez pas à me contacter par mail. Peut-être pouvons-nous travailler ensemble pour proposer la meilleure expérience à vos utilisateurices ?

Récapitulatif des articles de cette série :

• Pourquoi améliorer le LCP de vos pages ?
• Analyser le comportement réseau pour améliorer FCP et LCP
• Optimiser les images sur le web : checklist des bonnes pratiques
• Optimiser le chargement des fonts (vous êtes ici)
  • Rappels sur les bonnes pratiques réseau
  • 1. Utiliser une font unique
  • 2. Utiliser plusieurs graisses de fonts grâce aux Variable Fonts
  • 3. Utiliser plusieurs fonts
  • Récapitulatif des bonnes pratiques
• Optimiser la gestion des icônes
• Comment diagnostiquer et corriger du Cumulative Layout Shift (CLS) ?
• Quelles techniques pour diminuer la quantité de JavaScript ? (bientôt)
• Quelles métriques suivre en dehors des Core Web Vitals ? (bientôt)
• Et plus encore 🫶

Prérequis : cet article se concentre sur l’optimisations et les points d’attention sur la gestion des fonts. Si vous n’avez jamais installé de web font ou que vous n’avez jamais vu de @font-face jusqu’à maintenant, je vous conseille de commencer par suivre ce tutoriel utiliser une web font (EN).

Avez-vous vraiment besoin d’une font ? §

Souvent, la première considération à avoir au sujet des performances est de savoir s’il est possible de faire moins. Est-ce que la police que vous utilisez est indispensable ?

Vous pourriez par exemple envisager d’utiliser cette règle par défaut :

font-family: system-ui, sans-serif;

Source: Modern Font Stacks (d’autres styles disponibles)

C’est une façon de dire au site web : utilise juste la police par défaut du système. Ainsi, l’utilisateurice ne devrait pas être trop choqué·e par celle-ci puisque c’est celle qu’iel voit au quotidien dans son OS. Ce blog a longtemps utilisé cette méthode. Mais ça ne représente que rarement la réalité d’un site web d’entreprise.

Bien souvent vous n’aurez pas en main les clés pour prendre cette décision. Il s’agit plutôt d’une considération de marque : la police d’écriture est un moyen efficace de véhiculer une émotion et donc de se positionner.

Mais peut-être pouvez-vous faire pencher la balancer vers moins de fonts. Quand un·e designer·euse me demande combien de fonts utiliser pour le site, je réponds généralement 2 fonts avec un grand maximum de 3, graisses incluses. Par exemple, sur ce blog, c’est la font “Assistant” qui utilise 3 graisses différentes (font-weight). Mais si j’avais eu une font pour les titres et une font pour les paragraphes, j’aurais poussé pour que les titres aient toujours la même graisse.

Rappels sur les bonnes pratiques réseau §

Avant de rentrer dans le vif du sujet, je veux juste rappeler en quelques mots 2 bonnes pratiques que nous avions vu dans un des premiers articles de cette série Comment analyser la trace réseau de votre site ? :

• assurez vous que la font est hébergée sur le même domaine que votre page HTML :
  Sur une connexion classique, cela vous fera gagner facilement 100ms de temps de chargement. Mais sur des connexions plus ératiques, vous pouvez facilement considérer que cela vous fera gagner dans les 500ms.

• évitez les effets de cascade en ajoutant un <link rel="preload">
  Classiquement, c’est le CSS qui indique à votre navigateur qu’il faut télécharger une nouvelle font. Pour gagner en temps d’attente, vous pouvez l’indiquer dans votre HTML afin que la font soit téléchargée en parallèle de votre CSS.

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

Ces premières bonnes pratiques pourront vous amener dans la bonne direction. Mais elles ne seront pas suffisantes.

Comment faire alors pour charger rapidement les fonts ? §

Comme à chaque fois en informatique, nous allons voir qu’il n’y a pas une manière unique de faire les choses. Il vous faudra donc choisir la bonne méthode en fonction de votre situation. Du plus simple au plus compliqué nous verrons donc :

• utiliser une font unique
• utiliser plusieurs graisses de fonts grâce aux Variable Fonts
• utiliser plusieurs fonts

Vous pouvez bien évidemment aller directement aux sections qui vous intéressent. Sachez cependant que je rentre dans pas mal de détails lors de la première section. Si les notions de subset, de font-display ou de size-adjust vous sont étrangères ou ont besoin de rappels, n’hésitez donc pas à prendre le temps de la lire avant de passer aux suivantes.

Par ailleurs, si vous voulez un historique de comment on en est arrivé là, sachez que cet article par Zach Leatherman retrace les différentes techniques qui existent. Mon but ici est de vous proposer les méthodes qui vous seront utiles aujourd’hui avec le support des navigateurs qui s’est grandement amélioré.

1. Utiliser une font unique §

Admettons que la seule font que vous souhaitez utiliser est Ovo.

1.1. Récupérer le fichier de font §

La première étape va être de récupérer la font et de la transformer dans le bon format. En effet, si vous télécharger la police directement depuis Google Font, vous la récupérerez en TTF. Mais :

• le format le plus performant est WOFF 2.0 qui est supporté par 96.4% des navigateurs aujourd’hui et peut vous faire économiser 67% de taille de fichier (48KB -> 16KB)
• il y a des chances que vous n’utilisiez qu’un nombre réduit de caractères. Par exemple si votre site est en français, vous utiliserez “é” et “œ”, mais pas “ß” par exemple. Cela nous fait gagner quelques KB de plus (16KB -> 12KB).

Pour appliquer ces changements, vous pouvez exécuter la commande suivante :

pyftsubset \
    ./static/fonts/Ovo-Regular.ttf \
    --unicodes="U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB, U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF, U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D, U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212" \
    --layout-features='*' \
    --flavor=woff2 \
    --output-file=./static/fonts/Ovo-critical.woff2

💡 Pour installer pyftsubset, vous pouvez exécuter pip3 install fonttools[woff,unicode].

Si vous n’avez pas python sur votre machine, vous pouvez utiliser le petit Dockerfile que j’ai moi-même utiliser pour ce blog.

Cette commande va supprimer tous les caractères qui ne sont pas dans la liste --unicodes. Vous pouvez déterminer cette liste en utilisant Character Table qui indique par langue quels caractères utiliser. Celle que j’ai utilisé dans l’exemple ci-dessus est pour le Français. Comme vous pouvez le voir à la fin du tableau, certains caractères ne font pas forcément partie de notre quotidien : †, ‡. N’hésitez donc pas à faire le tri par vous même.

Si vous voulez une liste très précise, vous pouvez récupérer la liste de votre site directement en utilisant glyphhanger. En CLI, il peut parcourir votre site pour en lister les caractères utiliser, se concentrer sur des sections critiques, etc.

Pour les autres options telles que --layout-features, n’hésitez pas à vous référer à l’article complet de Code Colibri.

💡 Quand vous récupérez les polices depuis Google Font, vous pourrez tomber sur des subset tout prêts : latin, latin-ext, cyrillic, etc. Généralement, latin est la version la plus proche de ce que vous voulez si vous opérez principalement en occident. Mais gardez en tête qu’il y a quand même plus de caractères que nécessaire et donc qu’il est pertinent de construire vous même votre liste de caractères (--unicodes).

1.2 Référencer la font dans notre CSS §

Maintenant que nous avons notre fichier optimisé, nous allons pouvoir indiquer au navigateur qu’une web font est disponible en CSS via @font-face :

@font-face {
	font-family: 'Ovo';
	font-display: fallback;
	/* Penser à bien héberger la font sur le même domaine que mon site */
	src: url(/fonts/ovo.woff2) format('woff2');
	/* Réutiliser ici exactement la même liste unicode que ci-dessus */
	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
}

body {
	font-family: 'Ovo', serif;
}

Plusieurs choses intéressantes à noter ici.

Je n’ai indiqué ni font-style ni font-weight dans @font-face. Ainsi, le navigateur utilise la font Ovo quand bien même le fichier qu’on a utilisé ne fournit qu’un style roman (font-style: normal; font-weight: normal). En effet, quand le navigateur va tomber sur du gras et/ou de l’italique, il va alors faire de la Font Synthesis : il va inventer une graisse et/ou un style à partir du style roman. Ce ne sera pas parfait, mais ce sera souvent mieux que d’utiliser une typo complètement différente pour le gras/italique. Selon la font choisie, le résultat pourra être décevant, voire rédhibitoire. Dans ce cas là vous devrez passer par une Variable Font ou plusieurs fonts.

J’utilise la règle font-display: fallback. Cette ligne indique comment doit se comportement le navigateur pendant le chargement de la font. Notamment, comment est-ce que la font doit s’afficher si le HTML et le CSS ont fini de se charger mais que le navigateur n’a pas encore reçu le fichier ovo.woff2 ?

• si cela ne fait pas longtemps (< ~100ms), alors la typo n’est pas affichée (Flash Of Invisible Text (FOIT))
• si cela fait un peu longtemps (< ~3s), alors la première typo disponible dans la font-family s’affiche (Flash Of Unstyled Text (FOUT)).
• si cela fait longtemps (> ~3s), alors on abandonne le chargement de ovo.woff2 et on reste sur la typo de l’étape précédente.

C’est un bon comportement par défaut parce que :

• Si la font est rapide à charger, on n’a pas de saut de texte au chargement des fonts
• Si la font met du temps à se charger, vos utilisateurices ne restent pas bloqué·e·s sur une page vide
• Si la font est vraiment trop lente, les personnes auront certainement commencé à lire le texte et seront au milieu de la page : pour éviter de perturber leur lecture, on évite de changer de font.

D’autres méthodes existent dans font-display. Je n’entrerai pas dans le détail, mais si vous décidez de choisir autre chose que fallback, privilégiez soit optional soit swap. Jamais auto ou block qui auront un effet désastreux sur les connexions lentes.

1.3 Choisir des bons fallbacks §

Dans la définition de la font-family (font-family: 'Ovo', serif;), vous pouvez constater que j’ai mis serif après Ovo. C’est une étape importante dans la définition de la font parce que vos utilisateurices verront cette font à un moment ou à un autre (dans un train, pendant leur voyage à la campagne ou juste parce que leur wifi a décidé d’être particulièrement lent).

Pourquoi serif ? Pour avoir un style proche de la typo finale, tout en étant sûr qu’elle soit disponible. serif est adapté si la police finale a des petits pieds au bout des lettres (= empattements). Sinon, privilégiez plutôt sans-serif.

Mais on peut mieux faire.

Size-adjust §

Notamment, une nouvelle méthode est en train d’arriver dans les navigateurs : size-adjust. Celle-ci est disponible sur 73% des navigateurs actuellement, on croise les doigts pour que ça arrive aussi sur Safari.

Ce size-adjust a pour but d’ajuster la font de fallback pour qu’elle se rapproche au maximum des espacements utilisés par la font finale. Ainsi, si la font de fallback est affichée puis remplacée par la font finale, on minimise les soucis de lecture.

Dans l’exemple ci-dessous, vous pouvez changer de tabs pour constater la différence que cela provoque :

• Si vous passez de “Fallback sans size-adjust” à “Font finale”, vous constaterez que vous aurez du mal à vous repérer : il vous faudra un petit temps avant de pouvoir reprendre votre lecture
• Si vous passez de “Fallback avec size-adjust” à “Font finale”, vous remarquerez un changement de graisse et de style, mais la différence est minime

Pour mettre en place ce size-adjust, vous aurez besoin de deux parties :

1. déclarer votre font de fallback

   @font-face {
   	font-family: 'Ovo-fallback';
   	size-adjust: 109.1%;
   	ascent-override: 72%;
   	src: local('Times New Roman');
   	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2,
   		U+C6-CB, U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC,
   		U+FF, U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019,
   		U+201C-201D, U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
   }
   

2. utiliser ce fallback dans votre déclaration de font-family

   body {
   	font-family: 'Ovo', 'Ovo-fallback', serif;
   }
   

Ces quelques lignes fonctionneront pour Ovo, mais je pense qu’il y a quelques subtilités à expliquer :

• Pourquoi Times New Roman plutôt que serif ? Parce que chaque size-adjust va dépendre de la typo utilisée. Si vous avez utilisé serif, chaque OS aurait eu une font différente et donc vous n’auriez pas pu adopter un size-adjust unique. Par ailleurs, Times New Roman a l’avantage d’être disponible sur beaucoup d’OS. Si vous cherchez sa contrepartie en serif, alors Arial est certainement le meilleur choix. (Safe web fonts)

  A noter toutefois que Times New Roman et Arial ne sont pas réellement disponibles partout, contrairement à ce qu’on trouve sur la majorité des sites qui en parlent. Notamment, elles le seront certainement sur Windows, Mac et Ubuntu. Mais sur mon Manjaro, elles n’y sont pas. Si vous êtes jusqu’au-boutiste, il peut être intéressant d’ajouter un deuxième fallback avec les fonts DejaVu Serif ou DejaVu Sans qui, elles, sont libres de droit et donc largement disponibles dans l’écosystème Linux.

  Vous ne pourrez toutefois jamais être certain que vos font de fallback sont disponibles. Il est donc important de garder la notion de serif ou sans-serif dans la font-family.

• Je vous ai parlé de size-adjust, mais un ascent-override a fait son apparition. La différence entre les deux est que size-adjust va gérer l’alignement horizontal tandis que ascent-override s’occupe de l’alignement vertical.

  Comment choisir leurs valeurs ? La réponse la plus simple est avec cet outil qui peut bien vous macher le travail : Automatic font matching. Le seul souci c’est qu’il part du principe que Arial ou Times New Roman est installé sur votre PC. Si ce n’est pas le cas, il faudra faire la manipulation manuellement en tatonnant jusqu’à trouver la bonne valeur.

• Pourquoi définir une unicode-range sur le fallback ? Vous pouvez constater que j’ai conservé exactement la même unicode-range que pour la font finale. Le but ici est de s’assurer que la font de fallback ne fasse pas trop de zèle. Notamment certaines fonts contiennent des emojis noir et blancs. Si vous oubliez de mettre l’unicode-range, vous retrouvez donc avec un emoji en noir et blanc plutôt que l’emoji habituellement affiché par votre navigateur. En renseignant la bonne unicode-range, vous vous assurez que les emojis ne soient pas considérés par cette @font-face. Pour en savoir, cet excellent article résume bien l’enfer des emojis (EN) 😁

• Enfin, que se passe-t-il si ma font a plusieurs graisses ? En effet, quand on parle de size-adjust on parle d’alignement horizontal. Et la graisse impacte l’espacement horizontal. Vous allez donc avoir besoin d’un size-adjust différent. L’idée est alors d’ajouter une @font-face différente spécialement conçue pour cette graisse en spécifiant font-weight: 700 :

  @font-face {
  	font-family: 'Ovo-fallback';
  	font-weight: 700;
  	/* Adapter la valeur du size-adjust à la font */
  	size-adjust: 104.1%;
  	ascent-override: 72%;
  	/* Choisir la bonne graisse sur la font de fallback */
  	src: local('Times New Roman Bold');
  	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2,
  		U+C6-CB, U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC,
  		U+FF, U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019,
  		U+201C-201D, U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
  }
  

Que faire quand size-adjust n’est pas disponible ? §

Je disais un peu plus haut que seulement 73% des navigateurs supportent size-adjust aujourd’hui. Que faire pour les 27% restants ?

Tout d’abord vous pouvez considérez que c’est du progressive enhancement : alors vous pouvez directement passer à la partie suivante sur les Variable Fonts

Sinon, il vous faudra passer par du JavaScript. En effet, ce que nous avons vu, c’est que size-adjust et ascent-override permettent de gérer les espacements horizontaux et verticaux de la font. Mais quand on y pense, c’est aussi ce que font letter-spacing et line-height en CSS.

La seule différence est que dans le premier cas vous pouvez le définir au niveau d’une font unique, et dans l’autre vous êtes obligé de définir le même pour toutes les fonts (fallback et finale).

L’astuce est alors d’utiliser des classes CSS qui vous permettent de savoir quelle font est en cours d’utilisation :

body {
    font-family: 'Times New Roman', serif;
	letter-spacing: 0.05em;
	line-height: 1.45;
}

.font-loaded body {
    font-family: Ovo, serif,
	letter-spacing: 0;
	line-height: 1.5;
}

C’est une représentation très simplifiée de la réalité. Vous aurez sûrement besoin de l’adapter pour chaque selecteur CSS qui à l’habitude de manipuler ces propriétés (ex : h1, h2, h3, h4, strong, etc.).

Pour obtenir cette nouvelle classe font-loaded, nous devons passer au JavaScript en utilisant FontFaceObserver :

/* Utiliser le même nom que celui utilisé dans la propriété `font-family` */
const ovoFont = new FontFaceObserver('Ovo');
ovoFont.load().then(() => {
	document.documentElement.classList.add('font-loaded');
});

Ainsi, dès que la font Ovo a fini de se charger la classe font-loaded est ajoutée.

Ce JavaScript doit être ajouté de manière synchrone à l’aide d’une balise <script> inline dans le <head> de votre site si vous voulez éviter au maximum un Flash Of Unstyled Text. Même si la librairie en elle même est légère (1.3KB gzip), ça représente une légère perte de performance et un sacré effort de maintenabilité en plus pour penser à maintenir tous les letter-spacing & line-height, avec et sans fallback dans votre CSS.

Par ailleurs, il est impossible d’utiliser FontFaceObserver uniquement pour les navigateurs qui ne supportent pas size-adjust. Si vous souhaitez gérer les 27% de navigateurs qui ne gèrent pas size-adjust, vous devrez donc tout le temps passer par FontFaceObserver et subir la légère perte de performance et de maintenabilité que cela représente. La question qu’il vous reste à résoudre est donc de savoir si cela vaut le coup ou non.

2. Utiliser plusieurs graisses de fonts grâce aux Variable Fonts §

Nous avons donc vu jusqu’à maintenant comment charger une unique font custom. La conséquence de ce choix est que si nous avons du gras dans la page, alors le navigateur utilisera de la Font Synthesis : il simulera une graisse en la devinant à partir de la font normale.

Parfois c’est suffisant, mais parfois… c’est moche.

C’est là que les variable fonts peuvent être un bon moyen de préserver la simplicité de chargement et la légerté de vos fichiers tout en mettant à disposition plusieurs variantes de graisse. De manière simplifiée, ça fonctionne en enregistrant dans le fichier les glyphes fins ET les glyphes gras, puis en faisant une interpolation entre les deux pour obtenir la graisse choisie.

Vous en trouverez notamment un bon nombre sur Google Fonts si vous cochez la case “Show only variable fonts”. Il y a même des trucs rigolos avec des fonts colorées avec des effets 3D.

Si nous revenons à notre code, quelle différence par rapport à la font unique ?

Dans le cas de mon blog, j’ai choisi la font Assistant. Celle-ci a des graisses allant de 200 à 800. La seule différence se trouve au niveau de l’appel à @font-face avec l’ajout de la propriété font-weight :

@font-face {
	font-family: 'Assistant';
	/* J'indique au navigateur que la font est capable
    de gérer des graisses allant de 200 à 800 */
	font-weight: 200 800;
	font-display: fallback;
	src: url(/fonts/Assistant.woff2) format('woff2');
	unicode-range: U+20-5F, U+61-7A, U+7C, U+A0, U+A7, U+A9, U+AB, U+B2-B3, U+BB, U+C0, U+C2, U+C6-CB,
		U+CE-CF, U+D4, U+D9, U+DB-DC, U+E0, U+E2, U+E6-EB, U+EE-EF, U+F4, U+F9, U+FB-FC, U+FF,
		U+152-153, U+178, U+2B3, U+2E2, U+1D48-1D49, U+2010-2011, U+2013-2014, U+2019, U+201C-201D,
		U+2020-2021, U+2026, U+202F-2030, U+20AC, U+2212;
}

🤔 A noter que vous verrez d’autres tutos & documentations la possibilité de changer le format pour indiquer au navigateur que c’est une Font Variable.

@font-face {
	src: url(/fonts/Assistant.woff2) format('woff2') tech('variations'),
	     url(/fonts/Assistant.woff2) format('woff2-variations');
}

Malheureusement chez moi ces syntaxes désactivent complètement les fonts. Pourtant, en restant sur la version simplifiée tout rentre dans l’ordre. Je n’ai pas réussi à trouver d’informations à ce sujet. Etant donné le support très large des variable fonts je pars donc du principe que, au pire, ça téléchargera la font dans tous les cas et fallbackera si finalement la font ne fonctionne pas sur le navigateur.

Cette notion de font-weight est la seule différence comparée au chargement d’une font unique. Toutes les autres problématiques restent identiques. Pensez donc bien à :

1. Optimiser le fichier de font avec pyftsubset
2. Utiliser les bonnes règles de font-display
3. Gérer les fallbacks et bien faire attention à l’ajustement des fallbacks en fonction des différentes graisses

Pour un exemple complet, vous pouvez vous référer à la feuille de style de mon blog.

3. Utiliser plusieurs fonts §

Dernier cas de figure : votre site est complexe, repose sur plusieurs fonts ou a minima une font qui a plusieurs graisses sans Font Variable disponible. Comment combiner tout ce qu’on a vu jusqu’à maintenant pour proposer la meilleure solution à l’utilisateur ?

Dans les exemples ci-dessous, j’utiliserai Montserrat pour les titres et Cabin pour les paragraphes. En réalité celles-ci existent sous form de Font Variables, mais pour mieux illustrer la situation, je considérerai que non.

3.1. Définir une @font-face par typo §

Si on exclut les @font-face de fallback, nous avions eu besoin d’une unique @font-face jusqu’à maintenant. Si nous avons plusieurs fonts, il va donc falloir duppliquer ces déclarations pour chacunes d’elles :

@font-face {
	font-family: 'Montserrat';
	font-weight: 400;
	src: url('/fonts/Montserrat.woff2') format('woff2');
}

@font-face {
	font-family: 'Montserrat';
	font-weight: 700;
	src: url('/fonts/Montserrat-Bold.woff2') format('woff2');
}

@font-face {
	font-family: 'Cabin';
	font-weight: 400;
	src: url('/fonts/Cabin.woff2') format('woff2');
}

@font-face {
	font-family: 'Cabin';
	font-weight: 700;
	src: url('/fonts/Cabin-Bold.woff2') format('woff2');
}

Mais cela apporte son lot de complexités :

• Plus de fichiers, donc plus long à télécharger : il est d’autant plus important de bien optimiser et prioriser vos ressources afin que votre site ait fini de s’afficher au plus vite.
• Chaque font arrive à son propre rythme : Admettons que vous receviez la font Cabin, puis, 500ms plus tard, Montserrat arrive pour les titres. A chaque fin de chargement le navigateur va changer le contenu et l’adapter à la nouvelle font. Au delà de l’effet sapin de Noël, le navigateur va être obligé de recalculer l’ensemble des positions du site (c’est l’étape de Layout) à chaque font chargée. Cette étape peut être très couteuse si vous avez un site complexe (ex : > 1500 éléments de DOM) ou qui utilise des systèmes de layout particulièrement complexes (ex : beaucoup de flexbox imbriquées, etc.).

Pour la lenteur de chargement, il s’agit essentiellement de bien optimiser les ressources pour limiter les impacts :

• les fonts sont hébergées sur le même domaine que votre site
• chaque font a été optimisée grâce à pyftsubset
• chaque @font-face a le fallback qui va bien en utilisant size-adjust

Cependant, pour les problèmes de rythme, c’est plus compliqué. En effet, il n’existe pas de moyen pour indiquer à votre navigateur de ne pas afficher une font tant que l’autre n’est pas chargée. La solution serait donc d’orchestrer vos chargements de cette façon :

body {
	font-family: Cabin-critical, Cabin-fallback, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
blockquote {
	font-family: Cabin-critical, Montserrat-fallback, sans-serif;
}

.fonts-loaded body {
	font-family: Cabin, Cabin-fallback, sans-serif;
}

.fonts-loaded h1,
.fonts-loaded h2,
.fonts-loaded h3,
.fonts-loaded h4,
.fonts-loaded h5,
.fonts-loaded blockquote {
	font-family: Montserrat, sans-serif;
}

1. Afficher une font de fallback en utilisant une de celles déjà installées sur l’ordinateur de votre utilisateurice (ici sans-serif).

2. Afficher ensuite la font la plus impactante en l’optimisant agressivement.

   La font la plus impactante sera généralement celle pour les paragraphes (ici Cabin). Mais si votre site fonctionne essentiellement avec des splashscreens faits uniquement des titres, alors privilégiez celle de vos titres (ici Montserrat).

   Vous pouvez l’optimiser agressivement en réduisant encore plus le nombre de glyphes à disposition. Peut-être pouvez vous vous contenter d’un espace, de 0-9, a-z et A-Z ? Si oui, ce serait les charactères unicodes suivants : U+20,U+30-39,U+41-51,U+61-7A. C’est plus facile cela dit en anglais qu’en français où ça risque de faire légèrement bizarre pour les accents.

   pyftsubset \
        ./static/fonts/Cabin-Regular.ttf \
        --unicodes="U+20,U+30-39,U+41-51,U+61-7A" \
        --layout-features='*' \
        --flavor=woff2 \
        --output-file=./static/fonts/Cabin-Critical.woff2
   

   L’intérêt de cette étape est que le site respecte les tons typographiques de votre charte très rapidement, même si toutes les fonts n’ont pas réussi à charger.

   Par ailleurs dans le cas où vous n’avez qu’un seul type de fonts (ex: uniquement Montserrat), mais plusieurs graisses à charger, cela vous permet de vous reposer sur la Font Synthesis qui sera vraisemblablement assez proche des graisses finales que vous comptez charger.

   Etant donné que c’est la seule font critique au premier affichage, c’est sur ce fichier là que vous pouvez ajouter un <link rel="preload"> dans l’entête de votre site.

   <head>
   	<link
   		rel="preload"
   		as="font"
   		type="font/woff2"
   		href="/fonts/Cabin-Critical.woff2"
   		crossorigin
   	/>
   </head>
   

3. Charger toutes les autres fonts et attendre que la totalité soit téléchargée avant d’ajouter la classe fonts-loaded à votre document.

   Pour faire cela, vous pouvez utiliser la même technique que pour les navigateurs qui ne supportent pas size-adjust : en passant par FontFaceObserver

   const cabinFont = new FontFaceObserver('Cabin');
   const cabinBoldFont = new FontFaceObserver('Cabin', {
     { weight: 700 }
   });
   const montserratFont = new FontFaceObserver('Montserrat');
   const montserratBoldFont = new FontFaceObserver('Montserrat', {
     { weight: 700 }
   });
   
   Promise.all([
     cabinFont.load(),
     cabinBoldFont.load(),
     montserratFont.load(),
     montserratBoldFont.load(),
   ]).then(() => {
   	 document.documentElement.classList.add('font-loaded');
   });
   

   Ainsi, grâce au Promise.all, on attend que toutes les fonts soient téléchargées avant de les afficher. Le temps que l’on perd à attendre l’arrivée des fonts, on va le gagner en performance ressentie et en temps de calcul pour le navigateur.

   Attention toutefois à bien penser à rendre ce script inline et synchrone dans le <head> de votre page. Ainsi, si les fonts sont déjà en cache, le navigateur sera en mesure de les afficher directement.

Récapitulatif §

Nous voilà arrivé au bout. Félicitations ! 👏

Si on récapitule un peu tout ce qu’on vient de voir, voici quelques éléments que je veux que vous gardiez en tête :

• commencez par faire le bilan sur vos fonts : lesquelles sont utiles, lesquelles peuvent être évitées ?
  • est-ce qu’il est possible d’utiliser des fonts variables ?
• Faites en sorte que vos fonts soient les moins bloquantes possible :
  • les héberger sur le même nom de domaine que votre site
  • veiller à ce qu’elles soient en cache pour ne pas avoir à les retélécharger à la prochaine page
  • ajouter des preload sur les fonts critiques
  • optimiser les fonts pour n’avoir que les caractères nécessaires (pyftsubset)
  • utiliser font-display: fallback ou swap pour éviter les pages blanches sur connexions lentes
• Travaillez sur les fonts de fallback pour limiter les effets sapin de Noël :
  • en utilisant size-adjust sur les fonts de fallback
  • en utilisant FontFaceObserver pour grouper les mises à jour en une seule

Pfiou ! Ca en fait des choses. Vous en voyez d’autres ? En tout cas, avec ça vous devriez voir un joli boost de performance sur votre site si ce n’était pas déjà en place. N’hésitez pas à me partager vos avancées Mastodon ou Twitter.

A la semaine prochaine pour la suite ! Je me concentrerai cette fois sur les icones. 👀