Konvertierung von Schriften zu WOFF/WOFF2 und Font-Subsetting mit Glyphhanger

Um Webfonts mit breiter Browser-Unterstützung einzubinden, werden inzwischen eigentlich nur noch Dateien im .woff- und .woff2-Format benötigt – wer keine Rücksicht auf Internet Explorer, Safari auf Mac OS älter als Sierra und ein paar mobile Browser nimmt, kann auch nur .woff2 nutzen (bei Can I use gibt es die entsprechenden Tabellen zum Browser-Support der beiden Schriftformate).

In diesem Beitrag zeige ich, wie sich mit Hilfe des Kommandozeilen-Tools Glyphhanger .ttf-Schriftdateien in .woff und .woff2 umwandeln und um unnötige Zeichen erleichtern lassen (das Subsetting).

Warum der ganze Aufwand? Es gibt doch Dienste wie Google Fonts oder Typekit …

Das ist korrekt. Bei einer Einbindung von Schriften über Drittanbieter werden aber Informationen des Nutzers (zumindest die IP-Adresse) an diesen Drittanbieter übertragen, und das kann im Zusammenhang mit der nahenden DSGVO vielleicht problematisch sein.

Fonts lokal vom Webserver der Website auszuliefern ist da die sicherere Variante.

Was ist Glyphhanger?

Im GitHub-Repo des Projekts wird es als Webfont-Werkzeuggürtel beschrieben: Glyphhanger kommt mit verschiedene Funktionen, die das Arbeiten mit Webfonts erleichtern – im Blogbeitrag »It’s Dangerous to Go Stallone. Take Glyphhanger« stellt Zach Leatherman das Tool vor, das er für die Filament Group entwickelt hat.

Die Funktionen von Glyphhanger in der Kurzübersicht:

• Erstellen von WOFF-/WOFF2-Dateien aus .ttf.
• Subsetting von Schriften:
  • durch Angabe von bestimmten Unicode-Zeichen(bereichen).
  • durch Angabe einer oder mehrerer URL(s), von der/denen dann die genutzten Zeichen als Vorgabe genutzt werden. Dafür gibt es auch eine Crawler-Funktion, sodass automatisch verlinkte Seiten der Website berücksichtigt werden. Außerdem ist es möglich, einen font-family-Wert zu übergeben, sodass nur die Zeichen extrahiert werden, die sich in Elementen mit dieser Regel befinden. Über eine Whitelist können Zeichen übergeben werden, die auf jeden Fall im Subset berücksichtigt vorkommen sollen.
• Zeichen in Unicode-Bereiche umwandeln.
• Unicode-Bereiche in Zeichen umwandeln.
• CSS-Regeln für die Nutzung des Subsets ausgeben.

Installation von Glyphhanger

Vorbemerkung: ich habe die Installation auf Windows 10 mit dem Windows Subsystem for Linux durchgeführt. Für die Installation der fontTools war es (soweit ich mich richtig erinnere) notwendig, Bash on Ubuntu on Windows als Administrator auszuführen.

Um Glyphhanger zu installieren, reicht der folgende Befehl (die Parameter --unsafe-perm=true --allow-root waren bei mir mit Ubuntu auf Windows 10 notwendig, andernfalls gab es eine Fehlermeldung, dass Chromium nicht installiert werden konnte):

npm install -g glyphhanger --unsafe-perm=true --allow-root
Code-Sprache: JavaScript (javascript)

Für die Nutzung der Subsetting-Funktion wird die Python-Bibliothek fontTools benötigt, die sich mit den folgenden Befehlen aus der Readme des Glyphhanger-Projekts installieren lässt:

pip install fonttools

# Additional installation for --flavor=woff2
git clone https://github.com/google/brotli
cd brotli
python setup.py install

# Additional installation for --flavor=woff --with-zopfli
git clone https://github.com/anthrotype/py-zopfli
cd py-zopfli
git submodule update --init --recursive
python setup.py install
Code-Sprache: PHP (php)

Danach ist Glyphhanger einsatzbereit.

Konvertierung von .ttf-Dateien zu .woff und .woff2

Zunächst ein Hinweis: die Lizenz der Schrift muss natürlich erlauben, dass sie als Webfont genutzt, konvertiert und verändert (das Subsetting) wird. Die Lizenz der Schrift ist eigentlich immer mit im Ordner vorhanden, mit dem ihr die Schriften herunterladet.

Wenn ihr euch einen entsprechenden Font zum Beispiel von Google Fonts heruntergeladen habt, wechselt in der Kommandozeile in den Ordner mit den Schriftdateien. Um komplett ohne Subsetting aus diesen Dateien WOFF- und WOFF2-Dateien zu erstellen, genügt folgender Befehl:

glyphhanger --formats=woff2,woff --subset=*.ttf
Code-Sprache: Bash (bash)

Als Rückgabe solltet ihr dann während des Vorgangs Nachrichten wie die folgende erhalten:

Subsetting NotoSans-Black.ttf to NotoSans-Black-subset.woff2 (was 458.75 KB, now 162.26 KB)
Code-Sprache: Bash (bash)

Je nach Anzahl der Font-Dateien (und vermutlich der Größe der einzelnen Dateien) kann das ein bisschen dauern. Im Anschluss habt ihr Webfont-Dateien, die ihr über die @font-face-Regel einbinden könnt.

Dafür hilfreich: neben den neuen Schriftdateien werdet ihr in dem Ordner auch CSS-Dateien finden, die eine Beispiel-Regel zum Einbinden enthalten, etwa so:

@font-face {
  src: url(NotoSans-Black-subset.woff2) format("woff2"), url(NotoSans-Black-subset.woff) format("woff");
}
Code-Sprache: CSS (css)

Subsetting von Fonts

Kommen wir nun zum Subsetting der Fonts, dem Entfernen von nicht benötigten Zeichen aus der Schrift, um die Dateien kleiner zu machen. Glyphhanger bringt mit --US_ASCII und --LATIN zwei Presets für das Subsetting mit. Ich habe mich bei der Umstellung von Google Fonts für einen anderen Weg entschieden.

Die API-URL der Google Fonts sieht für Noto Sans zum Beispiel so aus, wenn nur der Regular-Schnitt gefragt ist: fonts.googleapis.com/css?family=Noto+Sans:400.

Wenn ihr diese URL aufruft, bekommt ihr mehrere @font-face-Regeln für die verschiedenen Zeichensätze inklusive der jeweiligen unicode-range-Angaben (die sorgt dafür, dass moderne Browser die entsprechende Datei nur herunterladen, wenn es notwendig ist). Die Werte aus unicode-range habe ich dann für den --whitelist-Parameter von Glyphhanger genutzt und mir so nach und nach die Subsets für die verschiedenen Zeichensätze erstellt.

Der Befehl zum Erstellen des cyrillic-ext-Subsets von Noto Sans sieht zum Beispiel so aus:

glyphhanger --formats=woff2,woff --subset=*.ttf --whitelist="U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F"
Code-Sprache: Bash (bash)

Die @font-face-Regeln zum Einbinden habe ich von der Google-API übernommen, die url()-Werte angepasst, die Angabe für die WOFF-Datei eingefügt und die Werte für die unicode-range aus den Glyphhanger-CSS-Dateien übernommen (die ist um (hoffentlich) unnötige Zeichen gekürzt, so wird beispielsweise U+0460-052F zu U+460-52F).

Und damit haben wir jetzt optimierte Font-Dateien zur Einbindung vom eigenen Server. Wie kurz angerissen, bietet das Tool noch einige weitere Optionen, wie etwa die Nutzung der Zeichen von einer URL für das Subsetting – das könnte beispielsweise interessant sein, wenn es eine statische Website ist, auf der sich in absehbarer Zeit nichts ändern wird.