WOFF2

WOFF2 a été développé par Google et est devenu une recommandation W3C en mars 2018. Il s'appuie sur le concept WOFF original mais remplace la compression zlib par Brotli — un algorithme de compression également développé par Google — qui atteint des taux de compression significativement meilleurs.

Mais WOFF2 n'est pas simplement « WOFF avec une meilleure compression ». Il introduit une transformation de prétraitement qui restructure les données de police avant la compression, les rendant beaucoup plus compressibles. Pour les contours TrueType, cela signifie l'application d'un codage prédictif aux coordonnées des glyphes — encodant chaque point comme un delta par rapport à une valeur prédite plutôt que comme une coordonnée absolue. Le résultat est un flux d'octets beaucoup plus redondant que Brotli peut compresser de manière agressive.

Cette approche en deux étapes — prétraitement spécifique au domaine suivi d'une compression générale — explique pourquoi WOFF2 produit systématiquement les fichiers de police les plus petits de tous les formats.

WOFF2 applique un pipeline de compression en deux phases aux données source de la police :

• Phase 1 : transformation de prétraitement — des transformations spécifiques aux polices restructurent les données pour maximiser la compressibilité. Pour les contours de glyphes TrueType, cela utilise le codage prédictif des coordonnées — chaque point est encodé comme la différence par rapport à une position prédite, ce qui produit des nombres beaucoup plus petits. Des transformations similaires sont appliquées aux autres tables de polices.
• Phase 2 : compression Brotli — les données prétraitées sont ensuite compressées avec Brotli, qui combine la compression à fenêtre glissante LZ77 avec le codage de Huffman et un dictionnaire statique intégré. Brotli atteint une compression 20-30 % meilleure que zlib sur des données de polices typiques.

Côté navigateur, le processus s'inverse : décompression Brotli suivie de transformations inverses pour reconstruire les tables de polices originales. Malgré l'étape supplémentaire, la décompression WOFF2 est en réalité plus rapide que WOFF1 — Brotli est conçu pour un décodage rapide, et le fichier plus petit se transfère plus vite sur le réseau.

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

.icon { font-family: 'MyIcons'; }
.icon-home::before { content: '\E001'; }

Notez que nous ne listons qu'un seul src — WOFF2 seul. Avec une couverture de 97 %+ des navigateurs, de nombreux projets modernes n'ont plus besoin d'un format de solution de repli. La directive font-display: swap indique au navigateur d'afficher immédiatement le texte avec une police de remplacement pendant le chargement de la police d'icônes, évitant ainsi le texte invisible.

WOFF2 bénéficie d'une large prise en charge sur tous les navigateurs modernes. La seule lacune notable est Internet Explorer, qui a été retiré par Microsoft en juin 2022.

La couverture mondiale combinée se situe à environ 97 %. Les 3 % restants sont presque entièrement constitués d'installations IE héritées et de très anciens navigateurs mobiles.

Pour illustrer l'avantage de compression de WOFF2, voici des tailles de fichiers typiques pour une police d'icônes contenant 200 glyphes :

Les économies s'accumulent avec des ensembles d'icônes plus grands. Une police de 500 glyphes peut peser 200 Ko en TTF, 120 Ko en WOFF, et seulement 82 Ko en WOFF2. Sur des milliers de chargements de pages, ces kilo-octets se traduisent directement en temps d'affichage plus rapides et en coûts de bande passante réduits.

Toujours. WOFF2 devrait être le format par défaut pour tout déploiement de police d'icônes sur le Web. Il fournit les fichiers les plus petits, la décompression la plus rapide et une prise en charge quasi universelle des navigateurs.

Le seul scénario où vous n'utiliseriez pas WOFF2 seul est si vous ciblez Internet Explorer — auquel cas, associez-le à WOFF comme solution de repli :

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

Les navigateurs modernes utiliseront le fichier WOFF2 ; IE 11 se repliera sur WOFF. Tout le monde obtient la police, tout le monde l'obtient compressée.