Font Subsetting im und fürs Web
Font Subsetting steht für das Entfernen von nicht benötigten Zeichen aus Fonts. In diesem Beitrag möchte ich darauf eingehen wieso dies im Zusammenhang mit Webfonts sinnvoll sein kann und wie bzw. mit welchen Tools du aus einer beliebigen Font Zeichen herauslöschen kannst.
Der Aufbau einer Webfont
Bevor wir Zeichen aus einer Font entfernen macht es Sinn dass wir uns überlegen was in einer Font alles enthalten ist. Für Webfonts gibt es verschiedene Dateiformate wie WOFF (Web Open Font Format), das von allen modernen Browsern unterstützt wird, oder TrueType und OpenType die vorallem in älteren Browsern Verwendung finden. Auf die technischen Details möchte ich hier nicht eingehen. Wenn dich das genauer interessiert darfst du gerne Spezifikationen wie die des WOFF bzw. WOFF2 Formats herbeiziehen.
Für den weiteren Verlauf genügt es zu wissen, dass eine Webfont im Prinzip eine Lookup-Tabelle ist, die einen bestimmten Bytecode auf ein Zeichen abbildet. Der Bytecode 0041 wird auf das Zeichen A, 0042 auf das Zeichen B und so weiter abgebildet. Es handelt sich hierbei um den sogenannten Unicode Standart.
Für die Zeichen des lateinischen Alphabetes könnten wir uns dieses Mapping wahrscheinlich mit Müh und Not noch merken. Es gibt aber noch viele andere Alphabete sowie eine Vielzahl an Sonderzeichen und Ligaturen. Ausserdem beinhaltet nicht jede Font alle bzw. die gleichen Zeichen. Glücklicherweise gibt es allerhand Tools die uns den Inhalt einer Font visualisieren. Eines davon ist die Webseite FontDrop. Auf der Webseite kannst du eine beliebige Font-Datei hochladen und den Inhalt der Font betrachten. Zum Vergleich habe ich hier einmal die beiden Fonts die auf dieser Webseite zum Einsatz kommen, Ubuntu und Fantasque Sans Mono, aufgelistet:
Was sofort auffällt ist, das die Font Ubuntu lediglich 267 Zeichen beinhaltet, die Font Fantasque Sans Mono hingegen ganze 1046 Zeichen. Das sind viermal so viele Zeichen und entsprechend wirkt sich dies auch auf die Dateigrösse der Fonts aus.
Den benötigten Zeichen-Umfang bestimmen
Wenn wir uns die beiden Fonts einmal genauer betrachten, werden wir schnell feststellen das Fantasque Sans Mono neben den Zeichen des lateinischen Alphabets auch viele Zeichen aus anderen Alphabeten enthält. Ausserdem enthält die Font diverse Sonderzeichen die zum Beispiel zur Visualisierung von Quellcode verwendet werden. Genau dafür wurde die Font nämlich entworfen. Doch welche dieser Zeichen werden eigentlich benötigt? Das hängt natürlich sehr stark vom Verwendungszweck ab.
Um lediglich die Zeichen in eine Font zu packen die wir auch wirklich brauchen, müssten wir eine Webseite auf die verwendeten Zeichen analysieren. Dies manuell zu machen klingt nicht nur sehr aufwendig, es wäre es auch. Vor allem wenn wir es mit dynamischen Inhalten zu tun haben wäre diese Strategie nicht zielführend. Es existieren Tools, die uns dies abnehmen. Aber darauf möchte ich später eingehen, denn auch um eine manuelle Auswahl zu treffen gibt es gewisse Hilfsmittel.
Der Unicode Standard definiert sogenannte Blöcke von Zeichen. Einer davon ist der Basic Latin Block. Er reicht vom Bytecode 0000 bis 007F und enthält somit 128 Zeichen. Dies deckt in der Regel alle Zeichen ab, die für englische Texte benötigt werden. Für deutsche Texte benötigen wir jedoch noch einige Sonderzeichen die nicht im Basic Latin Block sind. Zusammen mit dem Latin-1 Supplement Block sollten alle Zeichen abgedeckt sein, die wir benötigen.
Font Subsetting - Den Zeichen-Umfang reduzieren
Da wir nun wissen, welche Zeichen benötigt werden, können wir damit anfangen die Webfont zu modifizieren. Dafür existieren diverse Tools. Ich möchte mich hier auf das Kommandozeilen-Tool Glyphhanger konzentrieren. Glyphhanger ist in der Lage nicht benötigte Zeichen aus einer Webfont zu entfernen indem wir dem Tool angeben, welche Zeichen wir gerne in der finalen Font hätten. Neben der manuellen Angabe von Zeichen kann Glyphhanger allerdings auch eine Webseite analysieren und anschliessend automatisch nicht benötigte Zeichen aus einer Font entfernen.
Glyphhanger installieren
Bevor wir Glyphhanger nutzen können, müssen wir das Tool zunächst einmal installieren. Glyphhanger kann als NPM Paket installiert werden, benötigt zur Ausführung jedoch die Python Library fonttools sowie einige weitere Abhängigkeiten um mit dem WOFF2 Format arbeiten zu können.
Als erstes benötigen wir also Python. Den Python Installer kannst du von der Python Webseite herunterladen. Dieser kümmert sich um alles weitere. Persönlich bevorzuge ich jedoch die Installation über den Windows Paket-Manager Chocolatey. Darüber kannst du Python wie folgt installieren:
choco install python
Nachdem wir Python installiert haben können wir uns an die Installation der erwähnten Abhängigkeiten machen. Die Library fonttools kannst du direkt über den Python Paket-Manager installieren:
pip install fonttools
Zudem benötigen wir die Kompressions-Bibliotheken Brotli und Zopfli, damit Glyphhanger in der Lage ist mit dem WOFF bzw. WOFF2 Format zu arbeiten. Um Brotli bzw. Zopfli zu installieren musst du den Quellcode der Bibliotheken klonen und lokal kompilieren. Dafür muss allerdings zunächst Microsoft Visual C++ 14 installiert werden. Den Installer dafür kannst du als Teil der Build Tools von der Visual Studio Webseite herunterladen. Nach der Installation von C++ kannst du mit der Installation von Brotli und Zopfli fortfahren:
git clone https://github.com/google/brotli
cd brotli
python setup.py install
cd ..
git clone https://github.com/anthrotype/py-zopfli
cd py-zopfli
git submodule update --init --recursive
python setup.py install
Nun haben wir alle Voraussetzungen zur Nutzung von Glyphhanger installiert und können uns an die Installation von Glyphhanger selbst machen. Da Glyphhanger als NPM Paket verfügbar ist kannst du das Tool direkt über NPM installieren:
npm install -g glyphhanger
Wie du siehst ist die Installation von Glyphhanger nicht ganz so einfach und bringt einige Abhängigkeiten mit sich. Um das Ganze etwas zu vereinfachen habe ich mir ein Docker Image erstellt, dass Glyphhanger beinhaltet und direkt verwendet werden kann. Doch darauf möchte ich ein anderes Mal eingehen.
Font Subsetting mit Glyphhanger
Nun sind wir bereit Glyphhanger zu benutzen. Die Verwendung ist im Vergleich zur Installation relativ einfach. Um aus einer Webfont den Basic Latin Block zu extrahieren must du lediglich den folgenden Befehl im Verzeichnis, in dem sich die Webfont befindet, ausführen:
glyphhanger --subset=*.woff --whitelist=U+0-FF
Mit dem ersten Parameter --subset=*.woff teilen wir Glyphhanger mit, welche Fonts bearbeitet werden sollen. In diesem Beispiel verwenden wir alle Font-Dateien mit der Datei-Endung .woff.
Mit dem zweiten Parameter --whitelist=U+0-FF geben wir den gewünschten Zeichen-Umfang an. In diesem Fall sind dies die Blöcke Basic Latin sowie Latin-1 Supplement. Wir könnten die Blöcke auch getrennt angeben indem wir sie mit einem Komma trennen: U+0-7F,U+80-FF. Auf diese Weise hätten wir auch die Möglichkeit einzelne Zeichen anstelle ganzer Blöcke auszuwählen. Mit U+0-7F,U+E4,U+F6,U+FC könnten wir zum Beispiel den Basic Latin Block sowie die Zeichen ä, ö und ü auswählen.
Wenn wir den Befehl wie zuvor beschrieben ausführen, erstellt Glyphhanger drei neue Dateien:
Subsetting fsm-r.woff to fsm-r-subset.woff (was 86.99 KB, now 32.14 KB)
Subsetting fsm-r.woff to fsm-r-subset.zopfli.woff (was 86.99 KB, now 21.6 KB)
Subsetting fsm-r.woff to fsm-r-subset.woff2 (was 86.99 KB, now 17.98 KB)
Wie du siehst sind die generierten Font Dateien um einiges kleiner als das Original. Für den Vergleich sollten wir die mit Zopfli komprimierte WOFF Font betrachten, da die ursprüngliche Font auch in diesem Format gespeichert ist. Wir konnten die Grösse der Font somit auf einen Viertel reduzieren!
Wann macht Font Subsetting Sinn?
Die Grössen-Optimierung durch Font Subsetting kann je nach Font und benötigtem Zeichen-Umfang enorm sein. Deshalb macht es Sinn dass wir uns fragen wann Font Subsetting eingesetzt werden sollte und wann nicht?
Grosse Fonts mit vielen Zeichen
Das am nahe liegendste Szenario ist selbstverständlich bei grossen Fonts die eine Vielzahl Zeichen enthalten. Bei solchen Fonts ist Vorteil den wir mit Subsetting erhalten enorm. Deshalb empfehle ich dir in diesem Fall von Subsetting Gebrauch zu machen - sofern die Lizenz der Font dies erlaubt.
Den dies ist oftmals nicht der Fall. Viele kommerziell erworbene Fonts erlauben es dir nicht, die Font Dateien zu modifizieren. Dadurch wird auch der Einsatz von Subsetting ausgeschlossen, da für das Subsetting die Dateien modifiziert werden müssen. Es lohnt sich also vor dem Kauf einer Font die Lizenz auf diesen Punkt genauer zu überprüfen.
Ist Subsetting auf Grund der Lizenz nicht möglich, solltest du auf jeden Fall prüfen ob die Font bereits als Subset bereitgestellt wird und nur das Subset verwenden, dass deinen Anforderungen entspricht.
Icon Fonts
Ein weiteres Szenario für Font Subsetting sehe ich bei Icon Fonts. Diese sind meist relativ gross und in der Regel wird nur eine limitierte Anzahl an Icons verwendet. Entsprechend gross ist auch hier das Optimierungspotenzial.
Überschriften & Landing Pages
Selbst wenn eine Font nicht sonderlich gross ist, kann Subsetting Sinn machen wenn nur eine sehr limitierte Anzahl an Zeichen verwendet werden. Dies ist zum Beispiel der Fall wenn eine Font lediglich für eine Überschrift verwendet wird oder wenn sie auf einer spezialisierte Landing Page eingesetzt wird, die so schnell wie möglich geladen werden soll. Auch in diesen Szenarien kann Font Subsetting deshalb sinnvoll sein.
Dynamische Inhalte
Schwieriger wird es bei der Darstellung von dynamischen Inhalten. Da wir hier nicht kontrollieren können, welche Zeichen genau benötigt werden, können wir auch nicht entscheiden welche Zeichen wir in das Subset inkludieren sollen. Um ein solches Scenario zu handhaben erlaubt uns der Webfont Standard die Angabe von mehreren Subset. Der Browser entscheidet dann zur Laufzeit welche der zur Verfügung gestellten Subsets tatsächlich geladen werden. Wie das genau funktioniert zeige ich dir in einem anderen Beitrag.
Fazit
Ich habe dir in diesem Beitrag gezeigt wie du mit Glyphhanger ganz einfach ein Subset einer Webfont erstellen und die Webfonts auf deinen Webseiten optimieren kannst. Die Installation von Glyphhanger ist nicht ganz so einfach, das Tool selbst ist aber sehr mächtig und kann noch einiges mehr als das was ich dir gezeigt habe. Auf weitere Anwendungsmöglichkeiten sowie eine etwas einfachere Installation mit der Hilfe von Docker werde ich in zukünftigen Beiträgen eingehen.
