Netzgestaltung

Webfonts sind, wie alle anderen Schriften auch, für den Einsatz in unterschiedlichen Sprachen ausgelegt. Daher enthalten sie eine Fülle von Schriftzeichen. Wird ein Font in einer Webseite verwendet, die vor Allem einen Sprachraum bedient, werden viele dieser Schriftzeichen nie aufgerufen. Mit der Fülle der Schriftzeichen wächst die Dateigröße der Schrift, weshalb es sich lohnt zu überprüfen welche Schriftzeichen tatsächlich verwendet werden, und dementsprechend den Webfont anzupassen.

Dienste wie Typekit oder Google-Fonts bieten die Möglichkeit eine Teilmenge von verwendeten Schriftzeichen festzulegen, und auf diese Weise die Dateigröße des ausgelieferten Webfonts anzupassen. Sollen die Webfonts selbst gehostet werden, ist dies zwar über Font Squirrel möglich, allerdings muss dazu der Webfont hochgeladen werden.

Für mich erschien das bisher als eine nicht zufriedenstellende Lösung, weshalb ich in der letzten Woche die Artikel Three Techniques for Performant Custom Font Usage von Ollie Williams und It’s Dangerous to Go Stallone. Take Glyphhanger von Zach Leatherman mit großem Interesse gelesen habe. Am Wochenende installierte ich dann fonttools und glyphhanger um Webfonts gut über das Terminal optimieren zu können.

Das Tool glyphhanger der Filament Group verwendet die fonttools und bietet darüber hinaus noch die Möglichkeit Dateien oder URLs zu Parsen um dadurch herauszufinden welche Teilmenge an Schriftzeichen darin verwendet werden. Entsprechend dessen kann schließlich ein Webfont optimiert werden, und in unterschiedlichen Formaten abgespeichert werden.

glyphhanger https://depone.net/ --formats=woff2,woff --subset=SourceSansPro-Regular.ttf --css

Wird eben erwähnter Befehl ausgeführt wird der Webfont entsprechend der verwendeten Schriftzeichen in meiner Webseite optimiert. Die Dateigröße minimiert sich dadurch signifikant:

Subsetting SourceSansPro-Regular.ttf to SourceSansPro-Regular-subset.woff (was 287.07 KB, now 27.27 KB)
Subsetting SourceSansPro-Regular.ttf to SourceSansPro-Regular-subset.woff2 (was 287.07 KB, now 21.04 KB)

Mit Hilfe der Option --css gibt glyphhanger die Anweisung aus mit deren Hilfe der Webfont im Stylesheet verwendet werden kann. Um TOFU – hässlichen Kästchen die das fehlende Schriftzeichen ersetzen – in der Typographie zu verhindern wird die unterstützte unicode-range direkt mit angegebenen. Befinden sich im Text nicht unterstützte Schriftzeichen, greifen die Browser auf Systemschriften zurück.

@font-face {
 src: url(SourceSansPro-Regular-subset.woff2) format("woff2"), url(SourceSansPro-Regular-subset.woff) format("woff");
 unicode-range: U+A,U+20-5B,U+5D,U+5F,U+61-7E,U+A0,U+A9,U+AB,U+AD,U+B7,U+BB,U+C4,U+C7,U+D6,U+D7,U+DC,U+DF,U+E4,U+E9,U+F6,U+FC,U+2013,U+2014,U+2019,U+201C-201E,U+2026,U+2033,U+2039,U+203A,U+2192,U+21E7,U+2318,U+F8FF;
}

Der eben erwähnte Rückgriff auf Systemschriften verhindert zwar TOFU und stellt die Lesbarkeit des Textes sicher, die Typographie wird jedoch empfindlich gestört. Daher muss die Optimierung der Webfonts mit Bedacht vorgenommen werden. Die Übersicht der Unicode-Schriftzeichen in der Wikipedia hilft bei der Einschätzung der notwendigen Teilmenge.

Abschließend ist es auch noch wichtig zu erwähnen, dass die Ersparnis in der Dateigröße nicht 90%, wie oben zitierter Ausschnitt andeutet, da es sich beim Ausgangsfont um ein TrueType Format handelt, der entsprechende Webfont (woff) war dennoch dreimal so groß wie die optimierte Teilmenge.

Der Vollständigkeit halber ist noch zu erwähnen, dass für die Komprimierung der Webfonts als woff und woff2 die Installation von Brotli und Zopfli notwendig ist.