WOFF2

WOFF2 is ontwikkeld door Google en werd in maart 2018 een W3C-aanbeveling. Het bouwt voort op het originele WOFF-concept, maar vervangt zlib-compressie door Brotli — een compressie-algoritme dat ook door Google is ontwikkeld — dat aanzienlijk betere compressieverhoudingen bereikt.

Maar WOFF2 is niet slechts "WOFF met betere compressie". Het introduceert een voorverwerkingstransformatie die fontgegevens herstructureert vóór compressie, waardoor ze aanzienlijk beter comprimeerbaar worden. Voor TrueType-contouren betekent dit het toepassen van voorspellende codering op glyph-coördinaten — elk punt wordt gecodeerd als een delta ten opzichte van een voorspelde waarde in plaats van een absolute coördinaat. Het resultaat is een veel redundanter bytestroom die Brotli agressief kan comprimeren.

Deze tweestaps-aanpak — domeinspecifieke voorverwerking gevolgd door algemene compressie — is waarom WOFF2 consistent de kleinste fontbestanden produceert van alle formaten.

WOFF2 past een tweeledige compressiepipeline toe op de bronfontsgegevens:

• Fase 1: Voorverwerkingstransformatie — fontspecifieke transformaties herstructureren de gegevens om de comprimeerbaarheid te maximaliseren. Voor TrueType glyph-contouren gebruikt dit voorspellende codering van coördinaten — elk punt wordt gecodeerd als het verschil ten opzichte van een voorspelde positie, wat veel kleinere getallen oplevert. Vergelijkbare transformaties worden toegepast op andere fonttabellen.
• Fase 2: Brotli-compressie — de voorverwerkte gegevens worden vervolgens gecomprimeerd met Brotli, dat LZ77-glijdende-venstercompressie combineert met Huffman-codering en een ingebouwd statisch woordenboek. Brotli bereikt 20-30% betere compressie dan zlib op typische fontgegevens.

Aan de browserkant wordt het proces omgekeerd: Brotli-decompressie gevolgd door inverse transformaties om de originele fonttabellen te reconstrueren. Ondanks de extra stap is WOFF2-decompressie eigenlijk sneller dan WOFF1 — Brotli is ontworpen voor snelle decodering, en het kleinere bestand wordt sneller overgedragen via het netwerk.

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

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

Merk op dat we slechts één src vermelden — alleen WOFF2. Met 97%+ browserafdekking hebben veel moderne projecten geen fallbackformaat meer nodig. De richtlijn font-display: swap vertelt de browser om onmiddellijk tekst te tonen met een fallbackfont terwijl het icoonfont laadt, waardoor onzichtbare tekst wordt voorkomen.

WOFF2 geniet van brede ondersteuning in alle moderne browsers. De enige significante leemte is Internet Explorer, dat in juni 2022 officieel door Microsoft werd stopgezet.

De gecombineerde wereldwijde afdekking ligt op ongeveer 97%. De resterende ~3% bestaat bijna uitsluitend uit verouderde IE-installaties en zeer oude mobiele browsers.

Ter illustratie van het compressievoordeel van WOFF2, hier zijn typische bestandsgroottes voor een icoonfont met 200 glyphs:

De besparingen stapelen zich op bij grotere icoonsets. Een font met 500 glyphs kan 200 KB zijn als TTF, 120 KB als WOFF en slechts 82 KB als WOFF2. Over duizenden paginaladingen vertalen deze kilobytes zich direct in snellere weergavetijden en lagere bandbreedtekosten.

Altijd. WOFF2 moet het standaardformaat zijn voor elke webgebaseerde icoonfontdistributie. Het levert de kleinste bestanden, de snelste decompressie en bijna universele browserondersteuning.

Het enige scenario waarin u WOFF2 niet zou gebruiken, is als u Internet Explorer als doelplatform heeft — in dat geval combineert u het met WOFF als fallback:

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

Moderne browsers laden het WOFF2-bestand; IE 11 valt terug op WOFF. Iedereen krijgt het font, iedereen krijgt het gecomprimeerd.