Schriftarten im Web präsentieren, ohne die Font-Datei offenzulegen

Die Idee kam über meine Freundin, die Grafikdesign studiert und eigene Schriftarten gestaltet. Wer eine selbst entwickelte Schrift auf einer Website zeigen will, hat ein grundsätzliches Problem: Damit ein Browser die Schrift darstellen kann, muss die Font-Datei normalerweise vom Server an den Browser übertragen werden.
Bei frei verfügbaren Webfonts ist das egal. Bei einer Schrift, die später verkauft oder lizenziert werden soll, eher nicht.

Das Problem mit Fonts im Browser

Wird eine Schrift über klassische Webtechnologien wie `@font-face` eingebunden, muss der Browser auf die Font-Datei zugreifen können. Die WOFF-, WOFF2- oder TTF-Datei liegt damit unter einer öffentlich erreichbaren URL auf dem Server.
Mit den Entwicklertools des Browsers findet und lädt man diese Datei in wenigen Klicks herunter. Dafür braucht es weder besondere technische Kenntnisse noch einen tatsächlichen Angriff auf den Server.
Für Type Designer heißt das: Die Schrift soll online möglichst realistisch aussehen, aber die vollständige Font-Datei will man dabei nicht mitliefern.
Dafür habe ich TypeSecure gebaut.

Rendern satt ausliefern

Die Grundidee ist simpel: Die eigentliche Schriftdatei verlässt den Server nicht.
Statt den Font an den Browser zu übertragen, wird der eingegebene Text serverseitig mit der gewünschten Schrift gerendert. Das Ergebnis geht anschließend als SVG oder PNG an den Browser zurück.
Der Client bekommt damit nur noch die visuelle Darstellung des Textes, nicht mehr die Schriftdatei selbst.
Technisch verschiebt sich damit ein entscheidender Teil des Renderings vom Browser auf den Server.
Anstatt
Browser → Font herunterladen → Text rendern
entsteht ein Ablauf wie
Browser → Text senden → Server rendert Font → SVG oder PNG zurückgeben
Die Font-Datei bleibt während des gesamten Vorgangs ausschließlich auf dem Server.

SVG oder PNG

TypeSecure kennt zwei Ausgabeformate mit jeweils eigenen Kompromissen zwischen Qualität und Schutz.

SVG

SVG ist die bessere Variante für eine hochwertige Darstellung im Browser. SVGs sind vektorbasiert, die Buchstaben bleiben also auch bei sehr großen Darstellungen scharf.
Die einzelnen Zeichen werden dabei allerdings als geometrische Formen übertragen. Theoretisch kann man diese Formen extrahieren und weiterverwenden.
Was dabei herauskommt, ist aber nicht die ursprüngliche Font-Datei. Metriken, Sidebearings, Kerning, OpenType-Features und andere interne Eigenschaften der Schrift gehen verloren.
Aus so einer SVG-Darstellung wieder eine vollständig funktionierende Schrift zu bauen, ist deutlich aufwendiger, als eine Webfont-Datei herunterzuladen.
SVG ist damit ein Kompromiss: sehr gute visuelle Qualität, besserer Schutz der eigentlichen Schriftdatei.

PNG

Wer mehr Schutz braucht, lässt die Ausgabe stattdessen als PNG rendern.
Der Browser bekommt dann nur noch ein Pixelbild des dargestellten Textes. Informationen über die ursprünglichen Vektorformen der Buchstaben sind darin nicht mehr enthalten.
Eine Rekonstruktion geht damit nur noch über manuelles oder automatisiertes Nachzeichnen der sichtbaren Buchstaben.
Der Nachteil kommt vom Format selbst: PNG ist rasterbasiert und erreicht besonders bei starken Vergrößerungen nicht die Schärfe eines SVG.
Deshalb gibt es beide Varianten. Je nach Anwendung kann man zwischen maximaler Darstellungsqualität und stärkerer Abstraktion von der ursprünglichen Schrift wählen.

Vom Problem zum Produkt

TypeSecure war für mich noch aus einem anderen Grund interessant.
Meine bisherigen Softwareprojekte sind aus Forschung, Studium oder konkreten internen Anforderungen entstanden. Bei TypeSecure wollte ich zum ersten Mal den gesamten Weg eines kleinen Softwareprodukts selbst durchlaufen.
Die technische Umsetzung war dabei nur ein Teil. Ich musste erst einmal verstehen, ob sich das ursprüngliche Problem überhaupt sinnvoll lösen lässt, welche Einschränkungen die Lösung hat und wie daraus eine Anwendung wird, die auch jemand ohne technischen Hintergrund benutzen kann.
Gerade diese Verbindung aus einem sehr spezifischen Problem aus dem Grafikdesign und einer technischen Lösung hat mir Spaß gemacht.
TypeSecure ist bewusst kein DRM-System und kann nicht verhindern, dass eine sichtbare Schrift irgendwie reproduziert wird. Sobald etwas auf einem Bildschirm dargestellt wird, kann man es auch kopieren, fotografieren oder nachzeichnen.
Das Ziel ist ein anderes: Die originale, direkt verwendbare Font-Datei muss nicht mehr öffentlich an den Browser ausgeliefert werden.
Aus einem Download, der sonst ein paar Sekunden dauert, wird damit ein deutlich aufwendigerer Rekonstruktionsprozess.

Live ausprobieren

TypeSecure läuft vollständig und kann direkt über die Website getestet werden.
Statt die einzelnen Funktionen hier im Detail zu beschreiben, habe ich dort eine Live-Demo eingebaut, mit der sich das Rendering und die verschiedenen Ausgabeformate direkt ausprobieren lassen.
Für mich war das Projekt vor allem eine Übung darin, ein reales Problem zu identifizieren, daraus eine technische Architektur abzuleiten und daraus eine Anwendung zu bauen, die als eigenständiges Produkt gedacht ist.