WOFF2

WOFF2 wurde von Google entwickelt und wurde im März 2018 eine W3C-Empfehlung. Es baut auf dem ursprünglichen WOFF-Konzept auf, ersetzt jedoch die zlib-Komprimierung durch Brotli — einen ebenfalls von Google entwickelten Komprimierungsalgorithmus — der deutlich bessere Komprimierungsverhältnisse erzielt.

Aber WOFF2 ist nicht einfach nur „WOFF mit besserer Komprimierung". Es führt eine Vorverarbeitungs-Transformation ein, die Schriftdaten vor der Komprimierung umstrukturiert und sie dadurch wesentlich besser komprimierbar macht. Bei TrueType-Konturen bedeutet das die Anwendung von prädiktivem Coding auf Glyphen-Koordinaten — jeder Punkt wird als Delta gegenüber einem vorhergesagten Wert kodiert, anstatt als absolute Koordinate. Das Ergebnis ist ein viel redundanterer Bytestrom, den Brotli aggressiv komprimieren kann.

Dieser zweistufige Ansatz — domänenspezifische Vorverarbeitung gefolgt von Allzweck-Komprimierung — erklärt, warum WOFF2 konsistent die kleinsten Schriftdateien aller Formate erzeugt.

WOFF2 wendet eine zweiphasige Kompressions-Pipeline auf die Quellschriftdaten an:

• Phase 1: Vorverarbeitungs-Transformation — schriftspezifische Transformationen strukturieren die Daten um, um die Komprimierbarkeit zu maximieren. Bei TrueType-Glyphen-Konturen wird prädiktives Coding der Koordinaten verwendet — jeder Punkt wird als Differenz von einer vorhergesagten Position kodiert, was viel kleinere Zahlen erzeugt. Ähnliche Transformationen werden auf andere Schrifttabellen angewendet.
• Phase 2: Brotli-Komprimierung — die vorverarbeiteten Daten werden dann mit Brotli komprimiert, das LZ77-Gleitfenster-Komprimierung mit Huffman-Kodierung und einem eingebauten statischen Wörterbuch kombiniert. Brotli erreicht 20-30 % bessere Komprimierung als zlib bei typischen Schriftdaten.

Auf der Browser-Seite kehrt sich der Prozess um: Brotli-Dekomprimierung gefolgt von inversen Transformationen zur Rekonstruktion der ursprünglichen Schrifttabellen. Trotz des zusätzlichen Schritts ist die WOFF2-Dekomprimierung tatsächlich schneller als WOFF1 — Brotli wurde für schnelles Dekodieren entwickelt, und die kleinere Datei überträgt sich schneller über das Netzwerk.

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

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

Beachten Sie, dass wir nur eine einzige src auflisten — WOFF2 allein. Mit einer Browser-Abdeckung von 97 %+ benötigen viele moderne Projekte kein Fallback-Format mehr. Die Direktive font-display: swap weist den Browser an, sofort Text mit einer Ersatzschrift anzuzeigen, während die Icon-Font lädt, und verhindert unsichtbaren Text.

WOFF2 genießt breite Unterstützung in allen modernen Browsern. Die einzige nennenswerte Lücke ist Internet Explorer, der von Microsoft im Juni 2022 eingestellt wurde.

Die kombinierte weltweite Abdeckung liegt bei etwa 97 %. Die verbleibenden ~3 % bestehen fast ausschließlich aus Legacy-IE-Installationen und sehr alten mobilen Browsern.

Um WOFFs Kompressionsvorteil zu veranschaulichen, hier typische Dateigrößen für eine Icon-Font mit 200 Glyphen:

Die Einsparungen summieren sich bei größeren Icon-Sets. Eine 500-Glyphen-Schrift kann 200 KB als TTF, 120 KB als WOFF und nur 82 KB als WOFF2 betragen. Über Tausende von Seitenaufrufen übersetzen sich diese Kilobytes direkt in schnellere Renderzeiten und geringere Bandbreitenkosten.

Immer. WOFF2 sollte das Standardformat für jede webbasierte Icon-Font-Bereitstellung sein. Es liefert die kleinsten Dateien, die schnellste Dekomprimierung und eine nahezu universelle Browser-Unterstützung.

Das einzige Szenario, in dem Sie WOFF2 nicht verwenden würden, ist wenn Sie auf Internet Explorer abzielen — in diesem Fall koppeln Sie es mit WOFF als Fallback:

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

Moderne Browser nehmen die WOFF2-Datei; IE 11 greift auf WOFF zurück. Alle erhalten die Schrift, alle erhalten sie komprimiert.