Font Optimization

Definition

Techniques d'optimisation des polices web : subsetting (garder seulement les caractères utilisés), font-display:swap, preload et formats modernes (woff2).

Analogie

Ne mettre dans sa valise que les vêtements qu'on va porter au lieu d'emporter toute la garde-robe.

Exemple de code

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF; /* Latin subset only */
}
/* Preload in HTML */
/* <link rel="preload" href="/fonts/inter-latin.woff2" as="font"> */

Cas d'usage

Réduire le FOUT/FOIT et le poids des polices pour améliorer le LCP et le CLS.

Anti-pattern

Termes lies