TTF in WOFF2 umwandeln

Für die meisten, die hier landen, ist der Anlass nicht Geschwindigkeit, sondern Datenschutz. Das Landgericht München I sprach mit Urteil vom 20. Januar 2022 unter dem Aktenzeichen 3 O 17493/20 einer Websitebesucherin 100 Euro Schadensersatz zu, weil eine Schrift beim Seitenaufruf von einem fremden Server nachgeladen und dabei ihre IP-Adresse dorthin übertragen wurde. Im Anschluss ging eine Welle gleichlautender Schreiben durch die Republik.

Die technische Antwort darauf ist immer dieselbe und sie ist unspektakulär: Die Schrift wird heruntergeladen und vom eigenen Server ausgeliefert, damit beim Seitenaufruf keine Verbindung zu Dritten entsteht. Und weil eine Schrift im Web als WOFF2 ausgeliefert wird und man sie meist als TTF bekommt, steht am Anfang dieser Umbaute diese Umwandlung. Das ist kein Rechtsrat, sondern die Erklärung, warum diese Seite im deutschsprachigen Raum ungleich häufiger aufgerufen wird als anderswo.

Es wird nichts neu gezeichnet. Eine TTF-Datei ist eine Sammlung von Tabellen: die Umrisse, die Zuordnung von Zeichen zu Zeichnungen, die Metriken, die Unterschneidungspaare, die OpenType-Funktionen. WOFF2 behält jede einzelne davon und komprimiert sie mit Brotli, nachdem die Schriftdaten in eine Form gebracht wurden, mit der dieser Kompressor gut zurechtkommt.

Deshalb ist der Schritt verlustfrei, und deshalb gibt es hier auch nichts einzustellen. Keine Qualitätsstufe, keine Auflösung, keine Farbentscheidung — man kann bei dieser Umwandlung technisch nichts falsch machen. Falsch machen kann man nur, ob man sie überhaupt vornehmen durfte, und das ist der nächste Abschnitt.

Eine Schrift ist Software und wird wie Software lizenziert. Die Desktoplizenz, die einer gekauften TTF-Datei beiliegt, erlaubt die Installation auf einer bestimmten Zahl von Rechnern und das Gestalten damit. Sie erlaubt nicht automatisch, die Datei auf einen Webserver zu legen, von dem jeder sie herunterladen kann. Webnutzung ist üblicherweise eine eigene Lizenz, wird gesondert verkauft und häufig nach Seitenaufrufen bepreist.

Technisch hindert dich nichts daran, und genau das ist das Problem: Das Umwandeln dauert eine Sekunde, und der Verstoß ist unsichtbar, bis jemand hinschaut. Die Ausnahme, die man kennen sollte, ist die SIL Open Font License, unter der die meisten freien Schriften stehen. Sie erlaubt Umwandeln, Verkleinern des Zeichenvorrats und Selbsthosten ausdrücklich, solange die Schrift nicht allein verkauft und ein geschützter Name nicht weiterverwendet wird. Die Lizenzdatei liegt fast immer im Download und ist eine Seite lang.

Eine Schrift kommt über eine @font-face-Regel auf die Seite. Die Regel gibt ihr einen Familiennamen, zeigt auf die Datei und erklärt, welches Gewicht und welchen Stil genau diese Datei darstellt. Der Familienname gilt nur in deinem Stylesheet und ist frei wählbar; er muss nicht heißen, wie die Schriftgießerei die Schrift nennt.

Der häufige Fehler ist eine einzige Regel für die ganze Familie. Der Browser weigert sich dann nicht etwa, fett zu setzen — er rechnet sich einen fetten Schnitt aus, indem er den normalen verdickt, und das Ergebnis ist sichtbar schlechter als der echte fette Schnitt, der ungenutzt im selben Verzeichnis liegt. Also: eine Regel je Datei, mit ehrlichen Angaben zu Gewicht und Stil. Wandle dabei nur die Schnitte um, auf die dein Stylesheet tatsächlich zeigt. Vier Schnitte zu je 25 Kilobyte sind 100 Kilobyte, bevor irgendetwas anderes geladen ist, und die meisten Entwürfe brauchen zwei.

Eine gekaufte TTF-Datei deckt Latein, erweitertes Latein, Kyrillisch, Griechisch, Währungszeichen und mehrere hundert Zeichnungen ab, die auf deiner Seite nie jemand tippen wird — und jeder Besucher lädt das vollständig herunter. Den Vorrat auf das zu kürzen, was wirklich gebraucht wird, spart in der Regel mehr als die Kompression selbst. Mach beides, und zwar in dieser Reihenfolge: erst kürzen, dann umwandeln.

Für deutschsprachige Seiten liegt hier die Falle. Wer den Vorrat auf das grundlegende lateinische Alphabet einschränkt, wirft ä, ö, ü, Ä, Ö, Ü und ß hinaus, dazu die deutschen Anführungszeichen und den Gedankenstrich. Die Seite sieht dann bis zum ersten Wort mit Umlaut gut aus und fällt danach auf eine Systemschrift zurück. Prüfe außerdem, was das Kürzwerkzeug mit den Ligaturen und alternativen Zeichnungen macht: Wird es angewiesen, nur die tatsächlich benutzten Zeichen zu behalten, entfernt es gern gleich die zugehörigen Tabellen, und das CSS, das diese Funktionen einschaltet, tut danach nichts mehr.

Ein Browser, der Text in einer Schrift setzen soll, die noch nicht fertig geladen ist, muss sich für ein Verhalten entscheiden. In der Voreinstellung wartet er — in den meisten Browsern bis zu drei Sekunden — und zeigt derweil gar nichts an. Das ist der Moment, in dem eine Seite mit eigener Schrift auf dem Telefon träge wirkt, und die häufigste Ursache dafür überhaupt.

Eine Zeile behebt es: font-display: swap in der @font-face-Regel zeichnet den Text sofort in einer Ersatzschrift und tauscht ihn aus, sobald die richtige da ist. Der sichtbare Umbruch dabei ist deutlich angenehmer als eine leere Fläche. Wer ihn ganz vermeiden will, nimmt font-display: optional — dann verzichtet der Browser bei diesem Besuch auf die Schrift, wenn sie nicht fast sofort bereitsteht, um den Preis, dass ein Teil der Besucher sie nie zu sehen bekommt.

Die Gewohnheit, in einer Regel nacheinander WOFF2, WOFF, TTF, EOT und eine SVG-Schrift anzugeben, stammt aus der Zeit um 2013 und nützt heute niemandem mehr. Jeder aktuelle Browser liest WOFF2, Safari und die mobilen Browser eingeschlossen, und das seit Jahren.

Eine einzige Datei anzugeben ist der Stand der Dinge. Ein Browser, der alt genug ist, um WOFF2 nicht zu kennen, fällt auf eine Systemschrift zurück, und das ist ein hinnehmbares Ergebnis — jedenfalls hinnehmbarer, als von jedem Schnitt fünf Fassungen zu pflegen, damit ein Programm bedient wird, das niemand mehr benutzt. Weniger Dateien heißt außerdem weniger Gelegenheiten, nach einem Schriftwechsel eine davon zu vergessen.

TrueType-Umrisse führen Hinting-Anweisungen mit sich: pro Zeichnung ein kleines Programm, das dem Zeichensystem sagt, wie die Form bei kleinen Größen verzogen werden soll, damit Stämme auf ganzen Bildpunkten landen. Diese Anweisungen sind Tabellen wie alle anderen und überstehen das Verpacken unangetastet.

Ob sie ihre Bytes wert sind, ist eine andere Frage. Bildschirme mit hoher Punktdichte haben genug Auflösung, dass die Nachhilfe unsichtbar bleibt, und macOS ignoriert Hinting ohnehin. Bei stark gehinteten Schriften macht dieser Teil einen spürbaren Anteil der Datei aus, und ein Kürzwerkzeug kann angewiesen werden, ihn zu entfernen. Das ist eine Sache zum Nachmessen statt zum Annehmen — und eher zum Behalten, wenn deine Besucher überwiegend mit Windows kommen und die Schrift klein gesetzt wird.

Eine variable Schrift bringt Achsen mit — Stärke, Breite, optische Größe — und erzeugt aus einer einzigen Datei stufenlos alle Schnitte dazwischen. Technisch sind die Achsen und die Verformungen, die daran hängen, wieder nichts anderes als Tabellen in der Schrift. Weil beim Verpacken keine Tabelle angefasst wird, kommt eine variable TTF-Datei als variable WOFF2-Datei heraus.

Das ist der Fall, in dem sich die Rechnung mit der Seitengröße umdreht. Statt vier einzelner Schnitte lädt der Besucher eine Datei, die alles dazwischen kann, und im Stylesheet wird sie mit einem Bereich statt mit einem einzelnen Wert angemeldet — font-weight: 100 900 in der @font-face-Regel. Ob das unter dem Strich weniger Bytes sind, hängt an der Zahl der Schnitte, die du wirklich benutzt: Bei zweien gewinnt meist die klassische Aufteilung, ab dreien die variable Datei.

Eine Schrift wird spät entdeckt, und daran ändert das Verpacken nichts. Der Browser lädt erst das HTML, dann das Stylesheet, findet dort die @font-face-Regel und stellt fest, dass er eine Datei braucht — die dritte Stufe einer Kette, die von vorn gerechnet zwei Umläufe gekostet hat. Genau deshalb wirkt eigene Typografie auf langsamen Verbindungen träge, obwohl die Datei selbst winzig ist.

Eine Zeile im Kopf der Seite behebt es: eine Vorabanforderung der WOFF2-Datei, die den Ladevorgang bereits anstößt, während das Stylesheet noch unterwegs ist. Wichtig dabei ist, dass Schriften über eine anonyme Verbindung geholt werden — die entsprechende Angabe muss gesetzt sein, sonst lädt der Browser die Datei ein zweites Mal, und aus einer Verbesserung wird das Gegenteil. Und fordere nur die Schnitte vorab an, die tatsächlich oberhalb der Falzkante sichtbar sind; alles andere nimmt dem eigentlichen Inhalt Bandbreite weg.

TTF, OTF, WOFF und WOFF2 sind vier Verpackungen um zweierlei Umrisse: quadratische Kurven in der einen Tabelle, kubische in der anderen. Zwischen den Verpackungen zu wechseln, rührt keine Zeichnung an und verliert nichts — deshalb funktioniert der Weg nach WOFF2 aus jeder der drei anderen Richtungen.

Die Umrisse selbst umzurechnen wäre etwas völlig anderes: ein Nachzeichnen jeder Glyphe, bei dem eine Kurvenart die andere annähert und das Hinting nicht übersteht. Genau deshalb wird die Bitte, eine TrueType-Schrift als OTF auszugeben, hier abgelehnt statt mit einer Datei beantwortet, deren Endung über den Inhalt lügt. Umgekehrt gilt dasselbe: Wer ein WOFF auspacken lässt, das kubische Umrisse enthält, bekommt eine OTF-Datei, und ein Wunsch nach TTF wird mit dem Grund abgewiesen.

Diese Umwandlung läuft auf unserem Server und nicht in deinem Browser, denn die Arbeit erledigt fontTools, und davon gibt es keine Fassung für den Browser. Die Datei geht verschlüsselt dorthin, wird in einer abgeschotteten Umgebung verpackt und das Arbeitsverzeichnis wird gelöscht, sobald der Auftrag fertig ist. Nebenbei: Ohne die Brotli-Bibliothek neben fontTools ließen sich zwar WOFF-Dateien schreiben, aber ausgerechnet keine WOFF2 — sie gehört fest zur Ausstattung.

Kostenlos gilt bis 25 MB je Datei und hundert Serverumwandlungen am Tag. Keine gewöhnliche Schrift kommt der Größe nahe: Eine reich ausgestattete TTF-Datei mit großem Zeichenvorrat liegt bei einigen hundert Kilobyte, und selbst eine CJK-Schrift — die einzige Gattung, die wirklich groß wird — bleibt deutlich darunter. Eine Familie mit vier Schnitten sind vier Aufträge, und das ist bei diesem Kontingent kein Thema.