WOFF in WOFF2 umwandeln

Bei der Übernahme einer gewachsenen Firmenwebsite findet sich in einem Ordner namens fonts fast immer dasselbe Bild: eine EOT-, eine SVG-, eine TTF- und eine WOFF-Datei je Schnitt, dazu ein Stylesheet mit einer fünfzeiligen src-Liste und einem Kommentar zum Internet Explorer. Das Kit wurde damals von einem Webfont-Generator erzeugt, als das Ausliefern von vier Behältern der einzige Weg war, jeden Browser zu erreichen — für ein mittelständisches Unternehmen, dessen Website seit dem letzten Relaunch kaum angerührt wurde, ist das der Normalfall und kein Sonderfall.

Nichts davon stimmt heute noch, und der nützliche Rahmen für diese Umwandlung ist nicht „diese Datei kleiner machen", sondern „den Ordner auf eine Datei je Schnitt reduzieren". Das Umpacken ist der leichte Teil. Was fünf Minuten wert ist, sind die Regel drumherum, der Zeichenvorrat, mit dem das Kit gebaut wurde, und ob die Lizenz das überhaupt erlaubt — jedes davon hat einen eigenen Abschnitt weiter unten.

Beide Behälter tragen dieselben sfnt-Tabellen wie eine TTF oder eine OTF: die Umrisse der Zeichnungen, die Zuordnung von Zeichen zu Glyphen, die horizontalen Metriken, die Unterschneidung, die OpenType-Funktionen. WOFF verpackt sie und komprimiert jede Tabelle mit zlib. WOFF2 bringt die Tabellen zuerst in eine Form, die sich gut komprimieren lässt — die Umriss- und Ortstabellen werden dabei umgebaut — und wendet dann Brotli auf das Ergebnis an.

Zwei Kompressoren und ein zusätzlicher Vorverarbeitungsschritt sind der Grund für den Unterschied, und bei einer gewöhnlichen Textschrift liegt er bei etwa dreißig Prozent. Die Schrift selbst bleibt unangetastet: gleiche Umrisse, gleicher Weißraum, gleiche Funktionen. Eine Seite, die das eine gegen das andere tauscht, sieht identisch aus und lädt weniger — eine der wenigen Verbesserungen bei der Ladezeit, die ohne Nebenwirkung auskommt.

Es ist naheliegend, auf das Original zurückzugreifen, und hier macht es keinen Unterschied. WOFF ist ein verlustfreier Behälter, das Auspacken liefert also genau die Tabellen zurück, die eingegangen sind, und das erneute Verpacken als WOFF2 ergibt dasselbe Ergebnis wie aus der TTF im selben Ordner. Es gibt keinen Generationsverlust wie bei Bildformaten und keine Einstellung, die sich falsch treffen ließe.

Das lohnt sich zu sagen, weil die Empfehlung bei anderen Umwandlungen in dieser Familie genau umgekehrt ist. Beim Weg zu einer installierbaren TTF oder OTF macht die Herkunft einen großen Unterschied — die Webkopie ist meist auf einen Zeichenvorrat beschränkt und umbenannt, und das Desktop-Original ist deutlich hochwertiger. Beim Weg zu WOFF2 bleibt man in jedem Fall im selben Zeichenvorrat, also die vorhandene Datei nehmen.

Bevor die Fallback-Kette gestrichen wird, lohnt sich der Blick in die Analyse der eigenen Besucher. Viele deutsche Unternehmen, Krankenhäuser, Sparkassen und Behörden betreiben nach wie vor geschlossene Firmennetze mit einer festgelegten, älteren Browserversion, weil eine interne Fachanwendung genau dagegen getestet wurde und ein Update Jahre an Freigabeverfahren kostet. Ein öffentlicher Auftritt dieser Institutionen kann also aus einem geschlossenen Netz heraus mit einem Browser aufgerufen werden, der WOFF2 nicht kennt, obwohl fast alle anderen Besucher längst aktuell unterwegs sind.

Das ist kein Grund, die WOFF-Datei für immer zu behalten — es ist ein Grund, vor dem Löschen kurz nachzuschauen statt danach. Zeigt die Analyse keine solchen Zugriffe, ist ein einziger src-Eintrag mit WOFF2 der zeitgemäße Stand. Ein unbenutzter src-Eintrag kostet nur dann, wenn er tatsächlich angesteuert wird, aber ein veralteter kostet auf Dauer Verwirrung im Stylesheet.

Eine generierte Regel aus dieser Zeit listet fünf Quellen: EOT mit einem Fragezeichen-Trick, WOFF2, sofern überhaupt erzeugt, WOFF, TTF und SVG mit einem Fragmentbezeichner. Zwei davon sind für Browser, die niemand mehr unterstützt. Der EOT-Eintrag existiert für den Internet Explorer 8, der SVG-Eintrag für eine Safari-Version auf iOS, die älter ist als das Format, das heute alles benutzt.

Unser System verzeichnet WOFF2 als von jedem aktuellen Browser gelesen, was die Kürzung sicher macht: eine Zeile src: url("marke.woff2") format("woff2") ist die moderne Regel. Vor dem Löschen des WOFF-Eintrags die eigene Analyse ansehen statt danach, denn „jeder aktuelle Browser" und „jeder Browser, der genau diese Seite besucht" sind nicht dieselbe Aussage — ein geschlossenes Firmennetz ist der Fall, der das durchbricht. Alles unterhalb der WOFF-Zeile kann ohne weitere Prüfung weg.

Das ist der Teil dieser Seite, für den niemand hierherkommt, und er ist am ehesten der, der zählt. Kommerzielle Webfont-Lizenzen untersagen häufig ausdrücklich, die gelieferten Dateien zu verändern, umzuwandeln oder neu zu kodieren, und eine Umwandlung ist genau das, auch wenn sich an der Typografie nichts ändert. Manche Schriftgießereien liefern WOFF2 nur auf Anfrage, statt es von vornherein mitzugeben.

Eine Schrift, die mit einem übernommenen Projekt kam, hat irgendwo eine Lizenz — in den Kaufunterlagen, der Markenübergabe, der Versionsgeschichte des Repositoriums oder einer Textdatei, die der Generator in denselben Ordner gelegt hat. Erst suchen, dann umwandeln. Stammt die Schrift aus einer heruntergeladenen Vorlage, gilt sie bis zum Gegenbeweis als ungeklärt: Das Recht eines Vorlagenautors, eine Schrift beizulegen, sagt nichts darüber aus, ob die eigene Website sie ausliefern darf. Offene Lizenzen sind der einfache Fall — die SIL Open Font License erlaubt Umwandeln, Kürzen des Zeichenvorrats und Selbsthosten ausdrücklich, solange die Schrift nicht allein verkauft und kein geschützter Name weiterverwendet wird.

Fast die ganze Gewichtsersparnis eines Webfonts entsteht durch das Entfernen von Glyphen, deshalb wurden Kits routinemäßig auf das grundlegende lateinische Alphabet mit ein paar Satzzeichen zurechtgestutzt. Das war damals vernünftig, und genau daher stammen die Lücken auf einer heutigen Seite: ein Eurozeichen, ein richtiger Halbgeviertstrich, typografische Anführungszeichen, eine Ellipse, oder ein Name mit ł, ğ oder ș.

Das Umpacken bringt davon nichts zurück. Zeigt die Website in einer Überschrift eine leere Box oder ein deutlich unpassendes Ersatzzeichen, war das Zeichen nie in der Datei, und die Lösung ist ein neuer Zuschnitt aus dem Desktop-Original mit einem Zeichenvorrat, der abdeckt, was die Website tatsächlich setzt. Das ist eine andere Aufgabe als diese, und sie lohnt sich, wenn das Kit mehr als ein paar Jahre alt ist.

Ein Kit aus dieser Zeit hat eine Datei je Schnitt: regulär, kursiv, mittel, halbfett, fett, fett kursiv. Sechs Downloads, sechs @font-face-Blöcke, und eine feste Auswahl an Schnitten, zwischen denen sich eine Gestalterin irgendwann etwas wünschen wird.

Wurde die Schriftfamilie inzwischen als variable Schrift veröffentlicht, kann eine einzige WOFF2-Datei mit stufenloser Gewichtsachse alle sechs ersetzen, und die Summe ist meist kleiner als der statische Satz, den sie ersetzt. Das ist eine Entscheidung über die Schriftfamilie, keine über den Behälter, und gehört in dieselbe Sitzung wie diese Umwandlung, weil sie ändert, was überhaupt umgewandelt wird. Vor einem Nachmittag mit sechs statischen Dateien, die gleich wieder gelöscht werden, prüfen, ob die Gießerei einen variablen Schnitt anbietet.

Jede Schrift trägt eine Namenstabelle, und Kit-Generatoren haben sie freizügig umgeschrieben — eine Schrift mit einem ganz bestimmten Namen heißt intern häufig etwas wie markesans-webfont. Weil die @font-face-Regel einen beliebigen Familiennamen deklariert, bleibt der Widerspruch meist jahrelang unbemerkt.

Er hört auf, harmlos zu sein, in zwei Fällen: wenn der interne Name mit einer auf dem Rechner der Besucherin installierten Schrift kollidiert, und wenn zwei zu unterschiedlichen Zeiten erstellte Dateien denselben Familiennamen beanspruchen und der Browser sich entscheiden muss. Wechselt die Schrift auf manchen Geräten unvorhersehbar zwischen Schnitten, ist das Öffnen der Dateien und Ablesen der internen Namen der schnellste Weg zur Ursache. Die Umwandlung übernimmt den Namen unverändert — was die WOFF sagte, sagt auch die WOFF2.

Drei Dinge lohnen sich, gleichzeitig mit dem Dateiwechsel einzustellen, weil sie den restlichen Ladeaufwand ausmachen. Eine lange Cache-Lebensdauer mit gehashtem Dateinamen, denn eine Schrift ändert sich nie an Ort und Stelle. Ein preload-Link für den einen oder die zwei Schnitte oberhalb der Falzkante, der die Runde entfernt, die sonst erst nach dem Parsen des Stylesheets beginnt. Und unicode-range, wenn getrennte Zeichensätze vorliegen, damit eine Seite ohne Kyrillisch die kyrillische Datei nie anfragt.

Schriften sind außerdem einer der wenigen Fälle, in denen eine zusätzliche Kompression auf dem Server nichts bringt: WOFF2 ist bereits mit Brotli komprimiert, ein erneutes Gzip kostet Arbeit ohne Gewinn. Die meisten Server schließen Schrift-MIME-Typen davon standardmäßig aus; ist das nicht so, ist es eine Einzeiler-Änderung.

Diese Umwandlung läuft auf unserem Server statt im Browser, weil fontTools über keine Browser-Fassung verfügt. Die Datei geht verschlüsselt dorthin, wird in einer abgeschotteten Umgebung umgewandelt, und das Arbeitsverzeichnis wird gelöscht, sobald der Auftrag endet — ein echter Unterschied zu den meisten Umwandlungen hier, ausdrücklich benannt statt verschwiegen.

Der kostenlose Rahmen erlaubt 25 MB je Datei, weit mehr als jeder Webfont braucht, und ein Stapel kommt als eine einzige ZIP-Datei zurück. Ein Stapel ist bei dieser Aufgabe fast immer der Regelfall — das Kit hat sechs Dateien, und die Regel wird nur einmal neu geschrieben, sie einzeln umzuwandeln wäre vertane Zeit.