Schriften im Shop: Lizenz, Selbsthosting, Ladeverhalten

Eine Schrift kommt selten allein in den Shop. Sie bringt einen Lizenztext mit, eine Handvoll Dateien, eine Regel im Stylesheet und im ungünstigen Fall eine Verbindung zu einem fremden Rechner. Auf rund 88 Prozent der 2025 untersuchten Websites wurden Webschriften gefunden, und rund 72 Prozent liefern mindestens eine Schriftdatei vom eigenen Ursprung aus (HTTP Archive Web Almanac). Zwischen diesen beiden Zahlen liegt genau der Teil eines Shops, um den es hier geht: Wem gehört die Schrift, von wo wird sie ausgeliefert, und in welcher Reihenfolge kommt sie beim Kunden an. Wer diese drei Fragen in dieser Reihenfolge klärt, erspart sich zwei Diskussionen auf einmal – die über PageSpeed und die über den Datenschutz.

Warum Schriften an zwei Stellen gleichzeitig wehtun

Eine Webschrift ist Gestaltungsmittel, lizenzierte Software und Netzressource in einem. Aus dieser Dreifachrolle folgen drei getrennte Prüfungen, die im Alltag gern zu einer verschmelzen. Die Lizenz sagt, ob die Datei überhaupt auf einem Webserver liegen darf und für wie viele Seitenaufrufe. Der Ort der Auslieferung bestimmt, wessen Server die Anfrage des Kunden sieht und damit, wessen Datenschutzerklärung greift. Und die Einbindung entscheidet, ob der Fließtext sofort lesbar ist oder erst, wenn eine Datei aus dem Netz eingetroffen ist. Wer nur die dritte Frage betrachtet, beschleunigt eine Kette, deren erstes Glied rechtlich womöglich gar nicht trägt.

Technisch hängt die Schrift am Ende einer Abfolge. Der Browser lädt das HTML, findet darin das Stylesheet, lädt dieses, entdeckt darin eine @font-face-Regel und stellt erst dann fest, welche Datei er braucht. Angefordert wird sie sogar erst, wenn ein Element diese Schriftfamilie tatsächlich verwendet. Das sind drei aufeinanderfolgende Netzwege, bevor das erste Byte der Schrift unterwegs ist – und in dieser Zeit steht der Text entweder unsichtbar oder in einer Ausweichschrift da. Kommt die Datei zusätzlich von einem fremden Ursprung, treten Namensauflösung und ein neuer TLS-Handschlag dazwischen, die der eigene Server längst hinter sich hat.

Eine Schrift blockiert nicht die Seite. Sie blockiert den Text - und der Text ist der Grund, aus dem der Kunde gekommen ist.

XICTRON Entwicklungsteam

Im Shop wiegt das schwerer als auf einer Broschürenseite. Preis, Verfügbarkeit und Versandhinweis stehen im Fließtext, nicht im Bild. Verschiebt sich dieser Text, während der Kunde ihn liest, verschiebt sich auch die Schaltfläche darunter. Der Effekt ist messbar und geht in die Core Web Vitals ein, er ist aber vor allem im Kaufabschluss unangenehm: Ein Klick, der ins Leere geht, wird selten wiederholt. Genau deshalb gehören Schriften in die Betrachtung des Ladeverhaltens und nicht allein in die Rubrik Gestaltung.

Die Lizenz steht vor der Technik

Schriften werden lizenziert, nicht gekauft. Eine Desktoplizenz erlaubt typischerweise den Einsatz auf Arbeitsplätzen, also das Setzen von Anzeigen, Etiketten oder einem Katalog. Sie deckt in der Regel nicht ab, dass die Datei über einen Webserver an unbekannte Dritte ausgeliefert wird – dafür ist die Webfont-Lizenz gedacht, und sie ist ein eigener Vertragsgegenstand. Wer eine Schriftdatei aus dem Gestaltungsordner in das Webverzeichnis kopiert, hat damit den Nutzungszweck gewechselt, ohne den Vertrag anzupassen. Das ist der häufigste Lizenzfehler im Shopumfeld, und er fällt erfahrungsgemäß erst auf, wenn jemand nachfragt.

Webfont-Lizenzen werden häufig nach Seitenaufrufen bemessen. Manche Lizenzgeber zählen monatlich, manche vergeben ein Einmalkontingent, manche verkaufen eine unbefristete Nutzung für eine Domain. Für einen Shop, dessen Reichweite über die Jahre wächst, ist das eine Zahl mit Verfallsdatum: Was zum Zeitpunkt der Beauftragung passte, kann drei Saisons später außerhalb des lizenzierten Rahmens liegen. Deshalb gehört der Lizenzumfang nicht nur in den Ordner des Gestalters, sondern in dieselbe Ablage wie Domainverträge und Zertifikate – mit Laufzeit, Kontingent und Ansprechpartner.

• Deckt die Lizenz die Auslieferung über das Web ab? Eine Desktoplizenz reicht dafür in der Regel nicht, auch wenn die Datei technisch funktioniert.
• Auf wie viele Seitenaufrufe lautet das Kontingent? Der Wert gehört mit Zeitraum notiert, dazu die Stelle, an der sich der aktuelle Verbrauch ablesen lässt.
• Ist die Weitergabe an Dienstleister erlaubt? Agentur, Hoster und Entwicklungsumgebung berühren die Datei ebenfalls; manche Verträge verlangen dafür eine gesonderte Zustimmung.
• Darf die Datei zugeschnitten werden? Subsetting erzeugt eine veränderte Datei. Einige Lizenzen erlauben das ausdrücklich, andere untersagen jede Bearbeitung.
• Gilt die Lizenz für alle Umgebungen? Vorschau, Testsystem und Livesystem sind drei Domains; wer nur die Livedomain lizenziert hat, liefert anderswo ohne Deckung aus.
• Wo liegt der Nachweis? Rechnung, Lizenztext und Datum gehören in das Projektverzeichnis, nicht in ein Postfach.

Der zweite Lizenzbruch entsteht bei der Übergabe. Wechselt der Shop die Agentur oder zieht er auf einen neuen Server, wandern die Schriftdateien selbstverständlich mit – der Lizenzvertrag dagegen bleibt oft bei dem, der ihn abgeschlossen hat. Ist die Lizenz auf eine Agentur ausgestellt und nicht auf den Händler, endet das Nutzungsrecht mit der Zusammenarbeit, während die Dateien weiter ausgeliefert werden. Bei der Übernahme eines vorhandenen Shops lohnt daher eine Frage, die selten gestellt wird: Auf wen lautet die Schriftlizenz, und liegt der Vertrag vor?

Selbsthosting: der Ursprung entscheidet

Technisch ist eine Schrift von einem fremden Server eine ganz gewöhnliche Ressource – mit einem Unterschied: Der Browser baut dafür eine eigene Verbindung auf und übermittelt dabei die IP-Adresse des Besuchers an einen Rechner, der nicht dem Shopbetreiber gehört. Das geschieht ohne Zutun des Kunden, bevor er irgendetwas angeklickt hat, und es lässt sich mit Bordmitteln des Browsers nicht unterbinden. Genau an dieser Stelle wird aus einer Gestaltungsentscheidung eine Verarbeitung personenbezogener Daten, für die es eine Rechtsgrundlage braucht.

Wie ernst das genommen wird, zeigt eine Entscheidung des Landgerichts München I vom 20. Januar 2022 (Az. 3 O 17493/20). Das Gericht sprach einem Websitebesucher 100 Euro zu, weil beim Aufruf einer Seite die Schrift dynamisch von einem externen Anbieter nachgeladen und dabei die IP-Adresse übermittelt worden war (LG München I). Die Entscheidung ist ein erstinstanzliches Einzelurteil und kein höchstrichterlicher Maßstab. Ihre praktische Wirkung liegt weniger in der Summe als in der Begründungslinie, die seither in vielen Abmahnschreiben auftaucht: Die dynamische Einbindung war vermeidbar, weil die örtliche Auslieferung derselben Schrift möglich gewesen wäre.

Die praktische Antwort ist unspektakulär: Die Datei wird heruntergeladen, in ein Verzeichnis des eigenen Shops gelegt und von dort ausgeliefert. Damit entfällt die Übermittlung, die Einwilligungsfrage stellt sich für die Schrift nicht mehr, und die Datei fällt unter dieselben Regeln wie jedes andere Bild oder Skript im Shop. Wie weit sich ein Shop insgesamt von fremden Aufrufen lösen kann, beschreibt der Beitrag über den Betrieb ohne Einwilligungsbanner. Für Schriften ist der Weg dorthin der kürzeste, weil dabei keine Funktion verloren geht.

Schriftinventur im vorhandenen Shop

Vor der ersten Änderung steht eine Zählung. In gewachsenen Shops liegen Schriften an mehr Stellen als erwartet: im Theme, in zwei Erweiterungen, in einem alten Seitenbaukasten, in der Symbolschrift der Navigation und häufig noch einmal in der Verwaltungsoberfläche. Jede dieser Stellen lädt eigene Dateien, oft in verschiedenen Schnitten derselben Familie. Wer ohne diese Zählung optimiert, verkleinert eine Datei und übersieht vier andere – und wundert sich anschließend, warum die Messung kaum reagiert.

Die Zählung hat zwei Teile. Der erste ist statisch: Welche Dateien liegen im Projekt, welche @font-face-Regeln existieren, welche Familien werden im CSS überhaupt aufgerufen? Der zweite ist dynamisch: Welche Dateien fordert der Browser bei einem echten Seitenaufruf tatsächlich an, in welcher Reihenfolge und von welchem Ursprung? Beides zusammen ergibt die Arbeitsliste. Der statische Teil zeigt, was vorhanden ist, der dynamische zeigt, was davon Ladezeit kostet. Diese beiden Mengen decken sich erfahrungsgemäß nur teilweise.

1. Dateien finden: Alle Schriftdateien im Projektbaum auflisten, mit Pfad, Format und Größe. Doppelte Familien in verschiedenen Verzeichnissen sind der übliche Befund.
2. Regeln finden: Alle @font-face-Blöcke sammeln, auch die in Erweiterungen und im Seitenbaukasten. Jede Regel benennt eine Familie, einen Schnitt und mindestens eine Quelle.
3. Verwendung prüfen: Für jede Familie feststellen, welche Regel sie tatsächlich einsetzt. Familien ohne Verwendung sind der schnellste Gewinn, weil sie ersatzlos entfallen.
4. Ursprünge messen: Eine echte Seite laden und alle Schriftanfragen mit ihrem Ursprung protokollieren. Fremde Ursprünge kommen auf die Liste, unabhängig vom Format.
5. Schnitte zählen: Je Familie festhalten, welche Strichstärken und Neigungen im Layout wirklich vorkommen. Vier Schnitte sind vier Dateien.
6. Symbolschriften prüfen: Icon-Schriften sind Schriften mit eigenen Nebenwirkungen und gehören in dieselbe Liste, siehe Barrierefreiheit im Shop.

Symbolschriften verdienen dabei eine gesonderte Betrachtung. Sie transportieren Bedeutung über Glyphen, die ein Vorleseprogramm nicht sinnvoll ausgeben kann, und sie fallen aus, wenn die Schrift nicht lädt – dann steht an der Stelle ein leeres Rechteck oder ein zufälliges Zeichen. Für die wenigen Symbole, die ein Shop tatsächlich braucht, ist eine kleine Sammlung aus SVG-Grafiken meist der ruhigere Weg: Sie lädt mit dem HTML, kennt keine Ausweichdarstellung und trägt ihre Bedeutung in einem Titel. Der Nebeneffekt ist eine Datei weniger in der Ladekette.

Format und Zuschnitt: WOFF2 und Subsetting

Für die Auslieferung im Web gibt es seit Jahren genau ein sinnvolles Format. WOFF2 verpackt die Schriftdaten mit Brotli und einem Vorverarbeitungsschritt, der Redundanz in den Tabellen der Schrift auflöst; die Spezifikation des W3C benennt genau diese beiden Gewinnquellen. Der zugehörige Evaluierungsbericht beziffert den Vorsprung gegenüber WOFF 1.0 für Schriften mit TTF-Umrissen auf einen Median von 23,94 Prozent im einen und 26,79 Prozent im anderen untersuchten Bestand, für Schriften mit CFF-Umrissen auf 13,51 Prozent (W3C). In der Praxis entfielen 2025 rund 65 Prozent aller Schriftanfragen auf WOFF2 (HTTP Archive Web Almanac) – bei selbst ausgelieferten Schriften waren es auf Mobilseiten rund 74 Prozent, daneben standen rund 18 Prozent WOFF und rund 8 Prozent unverpacktes TTF (HTTP Archive Web Almanac). In diesem Rest liegt ein Gewinn, der ohne jede Gestaltungsänderung zu haben ist.

Wie viel dabei zu holen ist, zeigt der Blick auf den Median: Schriftdateien wiegen im Mittelfeld typischerweise rund 35 bis 36 Kilobyte, mit kaum einem Unterschied zwischen Mobil- und Desktopabruf (HTTP Archive Web Almanac). Vier Schnitte einer ungeschnittenen Familie liegen schnell beim Vielfachen davon, ein Zuschnitt auf den tatsächlich benötigten Zeichenvorrat oft bei einem Bruchteil. Weil WOFF2 bereits verpackt ist, bringt eine zusätzliche Komprimierung durch den Server hier nichts mehr – anders als bei CSS und JavaScript, wo sie sich lohnt, wie der Beitrag zur Brotli-Komprimierung zeigt.

Ladeverhalten: font-display, Vorladen, Ausweichmetriken

Der Deskriptor font-display entscheidet, was der Browser tut, während die Schrift unterwegs ist. Mit block bleibt der Text kurz unsichtbar, mit swap erscheint er sofort in der Ausweichschrift und wird später ausgetauscht, mit optional verzichtet der Browser bei langsamer Verbindung ganz auf den Austausch. Im Crawl 2025 trug swap rund 49,6 Prozent der Desktopseiten und rund 50,1 Prozent der Mobilseiten (HTTP Archive Web Almanac) und ist damit die verbreitete Wahl. Für einen Shop ist sie meist auch die richtige, weil Preis und Verfügbarkeit lesbar sein sollten, bevor die Gestaltung vollständig ist.

Eine Ausweichschrift, die anders misst als die Zielschrift, verschiebt das Layout genau in dem Moment, in dem der Kunde schon liest.

XICTRON Entwicklungsteam

Der Preis von swap ist der sichtbare Sprung beim Austausch. Er lässt sich weitgehend abfangen, indem die Ausweichschrift auf die Maße der Zielschrift getrimmt wird. Dafür gibt es vier Deskriptoren: size-adjust skaliert die Zeichenbreite, ascent-override, descent-override und line-gap-override setzen die vertikalen Maße. Eine so vorbereitete Ausweichfamilie belegt denselben Platz wie die spätere Zielschrift, und der Austausch fällt kaum noch auf. Der Gewinn zeigt sich unmittelbar im Layoutsprung, den die Core Web Vitals messen.

Vorladen hilft, weil es die Kette abkürzt. Ein Vorladehinweis im Kopf der Seite (rel=preload, as=font, type=font/woff2, crossorigin) startet den Abruf, bevor das Stylesheet ausgewertet ist. Verbreitet ist das noch nicht: 2025 setzten rund 12,0 Prozent der Desktopseiten einen Vorladehinweis ein, rund 18,3 Prozent einen Verbindungsaufbau im Voraus; auf Mobilseiten lagen die Anteile bei rund 11,7 und rund 17,7 Prozent (HTTP Archive Web Almanac). Zwei Punkte gehören dazu. Erstens ist ein Vorladehinweis nur für die ein bis zwei Dateien sinnvoll, die im ersten Bildschirmausschnitt gebraucht werden – jede weitere Zeile verdrängt anderes aus der Warteschlange. Zweitens braucht die Zeile das Attribut crossorigin, auch bei Auslieferung vom eigenen Ursprung; fehlt es, lädt der Browser die Datei ein zweites Mal.

Die Regeln im Stylesheet

Zusammengesetzt ergibt das eine überschaubare Konfiguration: eine Datei je Schnitt, ein Format, ein Zuschnitt mit passendem Zeichenbereich, font-display: swap, eine getrimmte Ausweichfamilie und ein Vorladehinweis für den Schnitt, der zuerst sichtbar wird. Das folgende Beispiel zeigt den vollständigen Block für eine Familie mit zwei Schnitten. Die Werte der Ausweichmetrik sind Beispielwerte; sie werden je Schriftpaar einmal ermittelt und ändern sich danach nicht mehr.

/* Ein Schnitt, ein Format, ein Zeichenbereich. */
@font-face {
  font-family: "Shopschrift";
  src: url("/assets/fonts/shopschrift-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+20AC, U+2122;
}

@font-face {
  font-family: "Shopschrift";
  src: url("/assets/fonts/shopschrift-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+20AC, U+2122;
}

/* Ausweichfamilie, auf die Maße der Zielschrift getrimmt. */
@font-face {
  font-family: "Shopschrift Ausweich";
  src: local("Systemschrift"); /* durch den Namen der vorhandenen Schrift ersetzen */
  size-adjust: 97.4%;
  ascent-override: 92.8%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}

:root {
  --schrift-text: "Shopschrift", "Shopschrift Ausweich", system-ui, sans-serif;
}

body {
  font-family: var(--schrift-text);
}

Drei Details in diesem Block sind erfahrungsgemäß die, die beim Nachbauen untergehen. Der Zeichenbereich muss zum Zuschnitt der Datei passen – steht dort ein Bereich, den die Datei nicht enthält, lädt der Browser sie trotzdem und findet die Zeichen nicht. Die Ausweichfamilie steht in der Schriftliste vor den generischen Namen, sonst greift sie nicht. Und der Vorladehinweis gehört nur für den Schnitt in den Kopf, der oben auf der Seite tatsächlich vorkommt; für die fette Auszeichnung im Fußbereich ist er verschenkt.

Die Messung danach besteht aus zwei Blicken. Der erste geht in die Netzwerkansicht eines echten Seitenaufrufs: Wie viele Schriftdateien werden angefordert, von welchem Ursprung, wie groß sind sie und wann starten sie? Der zweite geht auf die Felddaten, denn im Labor sieht eine schnelle Verbindung anders aus als der Abruf über ein Mobilnetz am Bahnsteig. Warum dieser Unterschied zählt und wie sich beides zusammenbringen lässt, steht im Beitrag über Felddaten statt Laborwerte.

• Anzahl der Schriftanfragen je Seitentyp: Startseite, Kategorie, Artikel, Warenkorb und Kasse getrennt zählen; die Kasse trägt oft eigene Bausteine.
• Ursprung jeder Anfrage: Jede Anfrage, die nicht an die eigene Domain geht, gehört auf die Liste – auch die aus eingebetteten Bausteinen.
• Startzeitpunkt der ersten Schriftdatei: Er zeigt, ob der Vorladehinweis greift oder ob die Datei erst nach dem Stylesheet angefordert wird.
• Layoutsprung beim Austausch: Vor und nach dem Trimmen der Ausweichschrift messen, sonst bleibt die Wirkung eine Behauptung.
• Übertragene Größe je Datei: Der Wert aus der Netzwerkansicht zählt, nicht die Dateigröße auf der Platte.

Was im Alltag danebengeht

Die Umstellung selbst ist an einem Vormittag erledigt. Zeit kosten die Stellen, die sie wieder aufheben. Fast alle davon haben dieselbe Ursache: Eine Schrift wird nicht an einer Stelle konfiguriert, sondern an mehreren, und diese Stellen kennen einander nicht. Sechs Fälle tauchen dabei regelmäßig auf.

• Das Update bringt die fremde Einbindung zurück: Ein Theme- oder Erweiterungsupdate überschreibt die angepasste Vorlage. Die Anpassung gehört deshalb in ein Kindtheme oder eine eigene Erweiterung, nicht in die gelieferte Datei.
• Die Verwaltungsoberfläche lädt anders als der Laden: Sie ist nicht öffentlich, verarbeitet aber Daten der Mitarbeitenden. Wer dort ohnehin Zugriffe ordnet, nimmt die Schriftaufrufe gleich mit – passend zum Beitrag über Rollen und Rechte im Backend.
• Eingebettete Bausteine bringen eigene Schriften mit: Bewertungsanzeigen, Kartenausschnitte und Videoeinbettungen laden Schriften nach. Sie fallen in dieselbe Betrachtung wie andere Fremdskripte im Shop.
• Die Datei liegt zwischen den Bildern: Schriften gehören in ein eigenes Verzeichnis mit eigener Benennung, sonst geraten sie in die Aufräumläufe der Medienverwaltung.
• Der Zwischenspeicher hält die alte Datei: Nach dem Zuschnitt trägt die neue Datei denselben Namen und wird nicht neu geladen. Ein Namensbestandteil mit Versionsnummer löst das dauerhaft.
• Die E-Mail-Vorlage nutzt dieselbe Familie: Bestellbestätigungen können keine Webschrift laden. Dort gehört eine Liste von Systemschriften hin, sonst wechselt das Erscheinungsbild zwischen Shop und Postfach.

Vorgehen und Abnahme

In der Reihenfolge, in der es sich rechnet: erst zählen, dann die Lizenz klären, dann die Auslieferung auf den eigenen Ursprung ziehen, dann das Format vereinheitlichen und zuschneiden, dann das Ladeverhalten ordnen und zuletzt messen. Diese Reihenfolge ist nicht beliebig. Wer mit dem Vorladen beginnt, beschleunigt womöglich eine Datei, die nach der Lizenzprüfung gar nicht ausgeliefert werden darf, und stimmt eine Kette ab, die anschließend ohnehin umgebaut wird.

Abgenommen ist die Arbeit, wenn vier Aussagen belegt sind: Für jede ausgelieferte Schriftdatei liegt ein Lizenznachweis vor. Kein Seitentyp fordert eine Schrift von einem fremden Ursprung an. Jede Datei liegt als WOFF2 mit dem Zeichenvorrat vor, den der Shop tatsächlich braucht. Und der Layoutsprung beim Schriftaustausch ist vorher und nachher gemessen. Wer diese vier Punkte in ein kurzes Protokoll schreibt, hat gleichzeitig die Unterlage für die nächste Entwicklungsrunde und für jede Rückfrage aus dem Datenschutz. Wie sich der Schritt in eine laufende E-Commerce-Betreuung einfügt und was er im Zusammenspiel mit Hosting und Betrieb bedeutet, klärt sich am vorhandenen System schneller als am Reißbrett – der Einstieg dafür ist eine Bestandsaufnahme der Ladekette.