Schriftartenersatz in Figma: Wie fehlende Schriftarten ersetzt und protokolliert werden

Importiert man eine lebende Webseite in Figma, kommt mit hoher Wahrscheinlichkeit mindestens eine Schriftart falsch an. Das ist kein Fehler des Importers. Es sind zwei verschiedene Schriftartmodelle, die zum ersten Mal aufeinandertreffen: Der Browser hat eine Schriftart im Moment des Seitenaufbaus heruntergeladen, aber Figma erkennt nur Schriftarten, die bereits auf dem eigenen Rechner installiert sind. Schriftartenersatz in Figma füllt genau diese Lücke. Das ist wichtig, weil eine ersetzte Schriftart stillschweigend die Zeilenlänge, den Zeilenumbruch und den vertikalen Rhythmus eines ganzen Layouts verändern kann.

Dieser Beitrag geht durch, warum die Diskrepanz entsteht, wie Figma eine fehlende Schriftart von sich aus erkennt und ersetzt, was UnHTML beim Konvertieren einer Seite standardmäßig ersetzt, wie man den Importbericht liest, den jeder Lauf erzeugt, und wo die Schriftlizenz tatsächlich ins Spiel kommt, sobald man die Typografie einer fremden Seite in der eigenen Datei vor sich hat.

Warum die Schriftarten einer Seite überhaupt fehlen

Ein Browser stellt die Schriftarten einer Seite über die CSS-Regel @font-face dar, die eine oder mehrere Quellen für eine bestimmte Schriftfamilie auflistet und den Browser die erste nutzbare auswählen lässt. Die @font-face-Regel ist bei der Reihenfolge eindeutig: eine local()-Quelle sollte vor einer url()-Quelle stehen, sodass eine bereits auf dem Rechner des Besuchers installierte Schriftart genutzt wird, bevor etwas heruntergeladen wird, und spezifischere format()- oder tech()-Hinweise sollten vor weniger spezifischen stehen. Auf diese Weise referenzierte Schriftdateien sind standardmäßig same-origin, anderswo nur nutzbar, wenn der Server CORS-Header sendet, die dies erlauben.

Nichts davon erfordert, dass die Schriftart jemals die Schriftverwaltung des Besuchers berührt. Eine Seite kann ihre Überschrift in einer bezahlten, sorgfältig lizenzierten Displayschrift darstellen, ohne den Browser je zu bitten, sie lokal zu installieren. Der Deskriptor font-display steuert sogar, was ein Besucher sieht, während dieser Download noch läuft, indem vorübergehend eine Systemschrift eingeblendet und ersetzt wird, sobald die eigentliche Datei da ist. Aus Sicht des Lesers ist der ganze Vorgang unsichtbar.

Figma funktioniert umgekehrt. Eine Textebene speichert eine Schriftart nach Familien- und Stilnamen und erwartet, dass genau diese Schriftart in der lokalen Schriftverwaltung vorhanden ist. Ist sie es nicht, hat Figma von sich aus nichts, worauf es zurückgreifen kann, und markiert einfach die Ebene. Genau dieser eine Unterschied, herunterladen gegenüber installieren, ist der vollständige Grund dafür, dass eine im Browser korrekt aussehende Seite einem Importwerkzeug eine Schriftart übergeben kann, auf die es nie Zugriff hatte.

Wie Figma eine fehlende Schriftart von sich aus erkennt

Figmas eigene Erkennung ist unkompliziert, sobald man weiß, worauf man achten muss. Eine fehlende Schriftart zeigt ein kleines Symbol in der linken Seitenleiste der Datei. Wählt man eine betroffene Textebene aus, erscheint dieselbe Markierung neben dem Schriftnamen in der rechten Seitenleiste. Die üblichen Ursachen: eine Schriftart, die schlicht nicht installiert ist, ein fehlender Schriftschnitt innerhalb einer sonst installierten Familie, oder Mitarbeitende, die unterschiedliche Versionen derselben Schriftart verwenden.

Von dort aus listet das Missing fonts-Panel (fehlende Schriftarten) jede fehlende Familie und jeden fehlenden Schnitt in der Datei auf und lässt einen für jede einen Ersatz aus einem Dropdown wählen. Ein Klick auf Replace fonts (Schriftarten ersetzen) wendet die Änderung auf die gesamte Datei an, für alle Mitarbeitenden, auch für jene, die Zugriff auf die Originalschrift haben. Figma empfiehlt, vorher eine Version zu speichern, da der Ersatz nicht nur auf die eigene Ansicht beschränkt ist.

Zwei Einschränkungen sind es wert, im Kopf zu behalten. Figma unterstützt nur .TTF- und .OTF-Schriftdateien und unterstützt auf ChromeOS oder Linux überhaupt keine eigenen Schriftarten, wo die Schriftauswahl unabhängig von der lokalen Installation auf Google Fonts beschränkt ist. Arbeitet ein Team plattformübergreifend, kann allein das einen Ersatz erzwingen, den ein Mac- oder Windows-Nutzer nie sehen würde.

Was UnHTML ersetzt, und wie man das ändert

Das Standardverhalten von UnHTML folgt derselben Logik wie Figmas eigener Umgang mit fehlenden Schriftarten, nur automatisch beim Importieren angewendet. Jede Schriftart, die der Importer nicht lokal hat, wird durch Inter ersetzt, und die Ausweichfamilie ist konfigurierbar, falls Inter für ein bestimmtes Projekt nicht die richtige Wahl ist. Nichts an diesem Ersatz geschieht stillschweigend. Jede Ersetzung wird im Bericht festgehalten, den der Import erzeugt.

Dieser Bericht lohnt sich zu lesen, nicht nur zu überfliegen. Für schwerere Layout-Fragen, etwa welche Frames ihre Struktur nicht behalten konnten und auf absolute Positionierung zurückfielen, geht der begleitende Beitrag darüber, was die Umwandlung in Ebenen übersteht, diesem Ausweichpfad ausführlicher nach. Preis- und Konfigurationsdetails zur Anpassung des Standardersatzes stehen auf der Preisseite.

Den Importbericht lesen

Jeder Lauf erzeugt einen Bericht, der drei Dinge abdeckt: welche Schriftarten ersetzt wurden und wodurch, welche Frames auf absolute Positionierung zurückfielen, weil sich ihr Layout nicht in Auto Layout abbilden ließ, und welche Bilder übersprungen wurden.

Lies ihn vor dem Versand einer Datei, nicht danach. Eine ersetzte Überschriftschrift verändert die gemessene Zeichenbreite, und das kann Umbruchpunkte in einem ganzen Abschnitt so verschieben, dass es auf den ersten Blick leicht zu übersehen ist. Zwei Absätze, die sich auf der Ausgangsseite sauber ausrichteten, können eine Zeile früher oder später enden, sobald Inter, schmaler als viele Displayschriften, übernimmt. Ein Frame, das auf absolute Positionierung zurückfiel, verhält sich anders, sobald sich die Inhaltslänge ändert, da es sich nicht mehr wie ein Auto-Layout-Frame anpasst. Wer den Bericht als Checkliste behandelt, statt als Protokoll, das man im Nachhinein überfliegt, findet beide Probleme, während sie noch billig zu beheben sind, bevor ein Kunde oder Teammitglied die Datei öffnet und fragt, warum eine Überschrift seltsam umbricht.

Web-Schriftlizenzen, einfach erklärt

Bei der Schriftlizenz hört die Ersatzentscheidung auf, rein kosmetisch zu sein. Webschrift-Formate existieren ebenso aus Lizenzgründen wie aus technischen Gründen: viele Schriftanbieter, die eine rohe TrueType- oder OpenType-Datei nicht für die Webnutzung lizenzieren wollen, sind bereit, dieselbe Familie als WOFF oder WOFF2 verpackt zu lizenzieren, weil das verpackte Format einschränkt, wie die Datei weiterverwendet werden kann. Genau das ist der Grund, warum eine Schriftart, die auf einer Seite sauber aussieht, nicht einfach heruntergeladen und als Desktop-Schrift installiert werden kann, ohne vorher zu prüfen, was die Lizenz tatsächlich erlaubt.

In der Praxis bedeutet das, dass die Webschriftlizenz einer Seite fast nie abdeckt, dieselbe Datei als installierte Desktop-Schrift innerhalb eines Designwerkzeugs zu nutzen, selbst für interne Arbeit. Eine Webschriftlizenz und eine Desktoplizenz werden bei ein und demselben Anbieter häufig als getrennte Posten verkauft, manchmal zu unterschiedlichen Preisen, und eine Schriftart, die vollkommen in Ordnung ist, um sie von einem Server auszuliefern, ist nicht automatisch in Ordnung, um sie auf einem Rechner zu installieren. Der ehrliche Weg, und der, den ein Schriftartenersatz standardmäßig geht, ist, eine Ausweichschrift einzusetzen und zu protokollieren, und dann bewusst zu entscheiden, ob man die Originalfamilie für die finale Datei lizenziert oder beschafft, genauso wie man die Bedingungen eines Stockfotos prüfen würde, bevor man es in einem neuen Kontext wiederverwendet. Das ist keine pixelgenaue Reproduktion der Typografie der Ausgangsseite, und genau dafür gibt es den Importbericht: damit diese Lücke sichtbar bleibt, statt übertüncht zu werden.

Eine fehlende Schriftart bei einem Figma-Import ist eigentlich kein Fehlschlag. Es ist das vorhersehbare Ergebnis davon, dass zwei Schriftartmodelle, herunterladen und installieren, zum ersten Mal aufeinandertreffen. Entscheidend ist, ob der Ersatz sichtbar ist: Bei jedem Import den Importbericht prüfen und jeden Schriftwechsel als bewusst zu treffende Entscheidung behandeln, nicht als kosmetisches Detail, über das man hinwegliest.