WOFF

WOFF 1.0 is gezamenlijk ontwikkeld door Mozilla, Opera en Microsoft als het eerste fontformaat dat van de grond af aan voor het web is gebouwd. Het werd in december 2012 een W3C-aanbeveling, een mijlpaal in de webtypografie.

In de kern is WOFF een wrapper rondom bestaande TrueType- of OpenType-fontgegevens. Het past zlib-compressie toe om de bestandsgrootte te verkleinen en bevat optionele metadatavelden voor licentie en attributie. Vóór WOFF moesten webontwikkelaars onbewerkte TTF- of OTF-bestanden aanbieden — groot, niet gecomprimeerd en zonder standaardmanier om licentie-informatie in te sluiten.

De belangrijkste innovatie was het creëren van een speciaal webfontcontainer die drie problemen tegelijk oploste: kleinere bestandsgroottes door compressie, een standaard metadatablok voor fontlicenties en een formaat dat browsers gemakkelijk konden valideren en sandboxen voor beveiliging.

De WOFF-container omhult bestaande fonttabellen (van TTF- of OTF-bronbestanden) met zlib-compressie per tabel. Elke tabel in het originele font — glyph-contouren, kerninggegevens, naamrecords — wordt onafhankelijk gecomprimeerd, waardoor de browser alleen de tabellen hoeft te decomprimeren die het nodig heeft.

De WOFF-header begint met een handtekening van vier bytes (wOFF), gevolgd door het fontflavor (dat aangeeft of de ingesloten gegevens TrueType of CFF zijn), de totale gecomprimeerde grootte en een pointer naar het optionele metadatablok. De browser leest deze header, decomprimeert de afzonderlijke tabellen terug naar hun oorspronkelijke vorm en geeft de gereconstrueerde fontgegevens door aan de tekstrenderingmotor.

Vanuit het perspectief van de renderingmotor is een gedecomprimeerd WOFF-bestand identiek aan de originele TTF of OTF — de compressie is volledig transparant.

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

De browser probeert elke src-vermelding op volgorde. Moderne browsers laden het WOFF2-bestand (kleiner, sneller); oudere browsers die WOFF2 niet begrijpen, vallen terug op het WOFF-bestand. Deze trapsgewijze aanpak geeft optimale prestaties met maximale compatibiliteit.

WOFF wordt door alle grote browsers ondersteund sinds het begin van de jaren 2010, waardoor het het veiligste fallbackformaat voor webfonts is. Het beslaat een nog breder bereik van browsers dan WOFF2, omdat het ondersteuning biedt voor oudere versies van Internet Explorer.

Met een mondiale browserafdekking van 98%+ wordt WOFF begrepen door vrijwel elke browser die nog actief in gebruik is. De enige noemenswaardige leemte is IE 6-8, waarvoor in plaats daarvan EOT nodig is.

WOFF2 is de opvolger van WOFF en is in de meeste praktische opzichten een strikte verbetering. Hier is een vergelijking:

WOFF2 biedt ongeveer 30% betere compressie dan WOFF dankzij Brotli en een gespecialiseerde voorverwerkingsstap die glyph-gegevens beter comprimeerbaar maakt. Het is ook sneller te decomprimeren. De moderne browserondersteuning voor WOFF2 is even breed — de enige leemte is Internet Explorer 9-11, dat WOFF ondersteunt maar niet WOFF2.

Voor de meeste projecten die gericht zijn op browsers vanaf 2024, is alleen WOFF2 voldoende. Het enige resterende voordeel van WOFF is dekking van IE 9-11.

Ondanks dat het is vervangen door WOFF2, zijn er nog steeds geldige redenen om WOFF in uw font-stack op te nemen:

• Als fallback naast WOFF2 — vermeld WOFF2 eerst in uw @font-face-declaratie en WOFF als tweede, zodat moderne browsers het kleinere bestand krijgen terwijl oudere browsers toch het font krijgen.
• Wanneer IE 11-ondersteuning vereist is — IE 11 ondersteunt WOFF maar niet WOFF2, dus WOFF is het beste gecomprimeerde formaat dat beschikbaar is voor die browser.
• In omgevingen zonder Brotli — sommige oudere buildtools, proxy's of CDN's verwerken de Brotli-compressie van WOFF2 mogelijk niet correct; de zlib-compressie van WOFF wordt universeel ondersteund.

Als geen van deze situaties van toepassing is op uw project, kunt u WOFF veilig overslaan en alleen WOFF2 aanbieden.