Web-Fonts: WOFF2 sind die einfachen 64%, Subsetting die anderen 30

Fonts blockieren das Rendering und sind groß. Ein einzelner Schriftschnitt kann mehr wiegen als alle Bilder oberhalb des Falzes zusammen. Zwei Änderungen reduzieren einen typischen Web-Font auf einen Bruchteil dessen, was ein rohes TTF ausliefert – und die meisten Websites machen keine von beiden.

WOFF2: die kostenlosen 64%

WOFF2 ist eine Font-Hülle, die die Glyph-Tabellen mit Brotli und einer auf Font-Daten abgestimmten Transformation komprimiert. Es ist keine andere Schriftart – es ist derselbe Font, kleiner, und er wird von jedem gebräuchlichen Browser unterstützt.

Wir haben 40 echte Fonts (Google-Fonts-TTFs) zu WOFF2 konvertiert:

Das ist die wirksamste Einzeländerung, die man an einem Web-Font vornehmen kann, und sie kostet nichts: dieselben Glyphen, dasselbe Rendering, ein Build-Schritt. Wer .ttf oder sogar .woff ausliefert, verschickt ohne Grund zwei- bis dreimal so viele Bytes.

Subsetting: die anderen 30

Das ist der Teil, den fast niemand macht. Öffnet man das TTF eines Google Fonts, trägt es meist weit mehr als Latein – Kyrillisch, Griechisch, Vietnamesisch, erweiterte Interpunktion, Symbole. Eine englischsprachige Website lädt alles davon herunter und rendert nichts davon.

Subsetting wirft die Glyphen weg, die eine Seite nie benutzt. Wir haben dieselben 40 Fonts mit hb-subset auf einen lateinischen Bereich (0-2AF plus gängige Web-Interpunktion und das Euro-Zeichen) subgesetzt:

Die letzte Zeile noch einmal: 22 MB TTF werden zu etwa 1 MB, sobald man sowohl zu WOFF2 konvertiert als auch nur die Glyphen behält, die eine lateinische Seite nutzt – eine Kürzung um 95%. WOFF2 allein brachte 22 MB auf 7 MB; Subsetting brachte 7 MB auf 1 MB. Die beiden stapeln sich, und die zweite ist die Überraschung.

Wie man subsetted, ohne etwas kaputtzumachen

Subsetting ist verlustbehaftet auf die einzige Art, die zählt: Die verworfenen Glyphen sind weg. Man sollte es bewusst tun.

• Nur weglassen, was man nicht ausliefert. Eine lateinische Seite subsetted auf Latein. Eine mehrsprachige Seite behält die Bereiche, die sie rendert.
• unicode-range in @font-face nutzen. Mehrere Subsets ausliefern (Latein, Latein erweitert, Kyrillisch …) und den Browser nur die laden lassen, die der Text einer Seite tatsächlich braucht. Genau so liefert Google Fonts seine Fonts aus, und das geht auch mit den eigenen.
• Bei nutzergeneriertem Text aufpassen. Können Nutzer alles Mögliche eingeben – Namen, Emoji, andere Schriftsysteme –, zeigt ein hartes reines Latein-Subset Tofu (□) für fehlende Glyphen. Für solche Oberflächen ein breiteres Subset oder einen System-Font-Fallback behalten.
• Hinting lässt sich meist weglassen. Auf modernen High-DPI-Displays bringt TrueType-Hinting wenig und kostet Bytes; es wegzulassen verkleinert die Datei weiter – testen, falls Low-DPI-Windows unterstützt werden muss.

Was Patu mit einem Font macht

Man schickt Patu ein TTF, OTF oder WOFF, und es liefert WOFF2 zurück. Übergibt man den Text oder die Unicode-Bereiche, die die Seite braucht, subsettet es im selben Schritt darauf – der 95%-Weg, nicht nur der 64%-Weg.

# convert + subset to the glyphs this page actually uses
curl -X POST "https://patu.dev/v1/compress?subset-text=$(cat page.txt)" \
  -H "X-Api-Key: $PATU_KEY" -H "Content-Type: font/ttf" \
  --data-binary @Inter.ttf -o Inter.woff2

Die WOFF2-Konvertierung ist die Änderung, die eigentlich schon jeder gemacht haben sollte. Das Subsetting ist es, das einen Font von einem echten Posten im Seitengewicht zu einem Rundungsfehler macht.

Methode und Daten: 40 echte Fonts (Google-Fonts-TTFs); WOFF2 über woffify, Subsetting über hb-subset auf 0-2AF,20AC,2018-201F,2010-2014. Die Reduktionen sind der Median gegenüber dem TTF-Original; das Aggregat ist die Summe der Bytes aller 40.