OTF in WOFF umwandeln

Ein Lastenheft aus einer Agentur, eine Vorlage für Corporate-Design-Abgaben oder eine Plattform mit einer festen Liste erlaubter Endungen verlangt oft ausdrücklich .woff, weil das vor einigen Jahren die richtige Antwort war und seither niemand die Vorgabe angefasst hat. Zu streiten lohnt sich selten — die WOFF-Datei ist in einer Sekunde erzeugt.

Sinnvoller ist es, WOFF2 gleich mitzuliefern und in der Übergabemail einen Satz dazu zu schreiben: WOFF erfüllt die Vorgabe, WOFF2 ist die Datei, die jeder aktuelle Browser tatsächlich lädt. Damit ist beiden Seiten gedient, ohne dass jemand die Vorlage ändern muss.

Die kubischen PostScript-Umrisse der OTF-Datei, die Zeichenzuordnung, die Metriken, das Kerning und jede OpenType-Funktion werden unverändert übernommen und mit zlib komprimiert. Es wird nichts nachgezeichnet und nichts weggelassen — eine WOFF-Datei aus einer OTF zeigt exakt das, was die OTF zeigt.

Das gilt auch in die andere Richtung, und darauf sollte man sich einstellen: Eine WOFF-Datei lässt sich in Sekunden zurück in eine installierbare OTF verwandeln. Wer sie weitergibt, gibt faktisch die Schrift weiter, nur in einem anderen Behälter, und jede Zurückhaltung, die für die OTF-Datei galt, gilt genauso für die WOFF-Datei.

Nach deutschem Urheberrecht ist eine Schrift ein Werk, und die meisten kommerziellen Lizenzen — von Foundries wie Fontwerk, FDI Type oder international lizenzierten Familien — nennen ausdrücklich, wer sie nutzen darf, und erlauben keine Weitergabe an Dritte. Eine Agentur, die eine Desktoplizenz gekauft hat und die umgewandelten Dateien an den Kunden schickt, macht diesen dadurch nicht automatisch zum Lizenznehmer, sondern schafft eine Situation, in der zwei Parteien mit einer Lizenz arbeiten.

Zwei Wege sind sauber: Der Kunde erwirbt die Weblizenz selbst, oder das Projekt setzt auf eine Schrift unter der SIL Open Font License. Unter dieser dürfen Schriften umgewandelt, im Zeichenvorrat gekürzt, weitergegeben und selbst gehostet werden, solange sie nicht allein verkauft und geschützte Namen nicht weiterverwendet werden — deshalb landen viele Kundenprojekte am Ende genau dort.

Eine gute Übergabe ist überschaubar: eine Datei je Schnitt und Stil, so benannt, dass das Gewicht ohne Öffnen erkennbar ist, dazu die passenden @font-face-Regeln als Textschnipsel. Wer die Datei bekommt, sollte nicht raten müssen, welche davon die halbfette Kursive ist.

Nur die Schnitte mitzugeben, die im Entwurf tatsächlich vorkommen, spart mehr als es zunächst scheint. Ein Ordner mit allen achtzehn Schnitten einer Familie, weil die Familie eben achtzehn hat, führt regelmäßig dazu, dass eine Website versehentlich vier davon lädt — und vergrößert nebenbei die Lizenzfrage auf mehr Dateien, als das Projekt braucht.

Der Browser wählt eine Datei über das im CSS deklarierte Gewicht und den Stil, nicht über den Dateinamen. Der Dateiname ist trotzdem das, was ein Mensch drei Monate später liest, und beide sollten übereinstimmen — brand-600-kursiv.woff neben einer Regel mit font-weight 600 und font-style italic lässt nichts offen.

Der Fehler, den diese Sorgfalt verhindert, ist eine unechte Fettschrift: Wird eine Familie nur mit dem regulären Schnitt geliefert und im Entwurf trotzdem fett gesetzt, rechnet der Browser sich selbst einen fetten Schnitt aus, und das Ergebnis ist sichtbar schlechter als der echte Schnitt, der ungenutzt danebenliegt.

WOFF2 wird von jedem aktuellen Browser gelesen und ist rund ein Drittel kleiner als die WOFF-Datei derselben Schrift. Was auch immer die Vorgabe verlangt — das ist die Datei, die im Betrieb tatsächlich ausgeliefert werden sollte, und sie kostet nur eine weitere Umwandlung.

Beide nicht in derselben @font-face-Regel als Rückfallkette hintereinander eintragen. Der Browser nimmt die erste Quelle, die er versteht, und das ist immer die WOFF2-Datei — die WOFF-Datei wird dann zu einer Datei, die niemand herunterlädt und niemand pflegt. Beide liefern, aber dazuschreiben, welche für den Betrieb gedacht ist.

Eine einzelne OTF-Datei mit vollständigem lateinischem Zeichenvorrat liegt oft im niedrigen dreistelligen Kilobyte-Bereich. Das Verpacken als WOFF nimmt einen brauchbaren Teil davon; als WOFF2 noch einmal etwa ein Drittel mehr.

Die eigentliche Ersparnis liegt trotzdem woanders: im Kürzen des Zeichenvorrats auf das, was die Website tatsächlich setzt. Eine 300-Kilobyte-Desktopschrift, auf das Grundlateinische reduziert und als WOFF2 verpackt, landet häufig bei rund 25 Kilobyte. Wenn Seitengewicht Teil der Vorgabe ist, gehört das Kürzen vor die Umwandlung, nicht danach.

Das ist die Falle, in die gerade Agenturen laufen. Auf dem eigenen Rechner ist die OTF-Datei installiert, also fällt der Browser, falls die WOFF-Datei nicht lädt, auf die lokal installierte Schrift gleichen Namens zurück — die Seite sieht perfekt aus. Der Kunde, der die Schrift nicht installiert hat, sieht Arial.

Ein privates Browserfenster hilft dabei nicht, denn die Schrift steckt auf Betriebssystemebene, nicht im Browser. Prüfen lässt sich das auf einem zweiten Gerät, auf dem Handy, oder indem man die @font-face-Familie kurz umbenennt, sodass keine installierte Schrift den Namen trägt. Zehn Sekunden dafür verhindern den peinlichsten Weg, wie eine Font-Übergabe scheitern kann.

Den gesamten Ordner ablegen statt Datei für Datei. Bis zu 100 Schriften werden in einem Durchgang umgewandelt und kommen als ZIP mit erhaltenen Dateinamen zurück, was genau der Form entspricht, in der eine Lieferung ohnehin erwartet wird. Für WOFF2 einmal wiederholen, und das Paket ist fertig.

Die Arbeit läuft auf unserem Server, weil fontTools keine Fassung für den Browser hat. Jede Datei geht verschlüsselt dorthin, wird in einer abgeschotteten Umgebung umgewandelt, und das Arbeitsverzeichnis wird gelöscht, sobald der Auftrag endet. Kostenlos gilt bis 25 MB je Datei und hundert Serverumwandlungen am Tag — eine ganze Familie samt zweitem Format passt bequem in einen Bruchteil davon.

Neben den Dateien selbst gehört ein kurzer Vermerk zur Lizenz in jede Übergabe: unter welcher Lizenz die Schrift steht, ob sie auf den Kunden übertragbar ist oder ob er eine eigene Weblizenz braucht, und wo die Lizenzdatei liegt. Das kostet drei Sätze und erspart eine Rückfrage Monate später, wenn ein neuer Dienstleister das Projekt übernimmt und wissen will, was er darf.

Bei Schriften unter der SIL Open Font License genügt der Hinweis auf die Lizenz und der beiliegende Lizenztext. Bei kommerziellen Familien ist der Verweis auf den Lizenzvertrag der Foundry der sicherere Weg — im Zweifel dort nachfragen, statt aus der Erinnerung zu antworten.

Bevor eine neue OTF-Datei umgewandelt wird, lohnt sich ein kurzer Check, ob dieselbe Schrift nicht bereits als Webfont vorliegt — auf der letzten Version der Website, in einem älteren Projekt derselben Agentur, oder als offizielles Webfont-Paket direkt bei der Foundry. Viele kommerzielle Anbieter liefern WOFF und WOFF2 auf Wunsch mit, wenn ohnehin schon eine Desktoplizenz gekauft wurde, und dieses Paket ist häufig sauberer kuratiert als eine selbst erzeugte Umwandlung, weil die Foundry weiß, welche OpenType-Funktionen im Web überhaupt greifen.

Fehlt ein solches Paket oder ist die Lizenz zu alt, um daran noch etwas zu ändern, bleibt das selbst durchgeführte Verpacken der richtige Weg — nur eben mit dem Wissen, dass es der zweitbeste ist. Bei einer Schrift unter der SIL Open Font License stellt sich diese Frage praktisch nicht, weil dort ohnehin niemand ein separates Webpaket zurückhält.

Eine OTF-Datei, die für den US-Markt zusammengestellt wurde, deckt nicht zwingend alles ab, was ein deutscher Text braucht. Ä, Ö, Ü, ä, ö, ü und ß gehören in jede europäische Schrift, tauchen aber in schmal geschnittenen oder rein für den englischen Markt lizenzierten Familien gelegentlich nicht auf, ebenso wenig wie die deutschen Anführungszeichen „" und der Gedankenstrich. Das Verpacken als WOFF ändert daran nichts — was nicht in der OTF steckt, steht auch nicht in der WOFF-Datei.

Vor der Übergabe ein deutsches Testwort mit allen Umlauten und scharfem S in einer Vorschau setzen lohnt sich mehr, als es dem Kunden zu überlassen, es beim ersten Produktnamen mit Umlaut selbst zu entdecken. Fehlt ein Zeichen, springt der Browser für genau dieses Glyph auf eine Systemschrift, was auf einer Überschrift sofort auffällt und auf Fließtext erst nach einigen Sätzen.