Webfonts: Schriften vom eigenen Server

Eine Webfont ist eine Datei, die geladen werden muss wie ein Bild. Wie sie eingebunden ist, hat Folgen für drei Dinge: den Datenschutz, die Ladezeit und das, was Besucher sehen, bevor die Schrift da ist. Die kurze Antwort: Liefere die Schriften von deinem eigenen Server aus, nur als WOFF2, in so wenigen Schnitten wie möglich, und mit font-display: swap und einer passenden Ersatzschrift. Das Wichtigste daran ist der eigene Server — nicht wegen der Geschwindigkeit, sondern wegen eines Urteils.

Vier Fragen an jede Schrift

Schriften tauchen im sichtbaren Teil der Website nicht auf. Ihre Einbindung steht in CSS-Dateien, in einem Theme oder in einem Plugin, und bleibt deshalb oft jahrelang unbemerkt. Laut Web Almanac 2025 nutzen 88 Prozent der Websites Webfonts. Stell jeder davon vier Fragen:

• Woher kommt sie — vom eigenen Server oder von einem fremden?
• Wie viel wiegt sie insgesamt, über alle Schnitte hinweg?
• In welchem Format liegt sie vor?
• Was passiert, bis sie da ist — bleibt der Text sichtbar oder verschwindet er kurz?

Die rechtliche Seite: Schriften vom fremden Server

Werden Schriften von einem fremden Server geladen — der bekannteste Fall ist Google Fonts —, baut der Browser des Besuchers beim Seitenaufruf eine Verbindung dorthin auf. Google nennt in seinen eigenen häufigen Fragen, was dabei ankommt: die IP-Adresse, die angefragte Adresse und die HTTP-Kopfzeilen, darunter Browserkennung und die verweisende Seite.

IP-Adressen sind personenbezogene Daten. Der Europäische Gerichtshof hat das am 19. Oktober 2016 in der Sache Breyer (C-582/14) für dynamische IP-Adressen entschieden: Es reicht, dass der Betreiber die Person mit Hilfe Dritter bestimmen lassen könnte.

Darauf baut das Urteil des Landgerichts München I vom 20. Januar 2022 (Az. 3 O 17493/20) auf. Eine Website hatte Google Fonts vom Google-Server geladen, ohne Einwilligung. Das Gericht verurteilte den Betreiber zur Unterlassung und zu 100 Euro Schadensersatz. Die Begründung ist der Kern: Ein berechtigtes Interesse nach Art. 6 Abs. 1 lit. f DSGVO scheide aus, weil sich Google Fonts auch nutzen lassen, ohne dass eine Verbindung zu Google-Servern aufgebaut und die IP-Adresse übertragen wird. Es ist die Entscheidung eines Landgerichts, keine höchstrichterliche — aber die Begründung trifft jede Website, die Schriften ohne Not von fremden Servern lädt.

Die gute Nachricht: Mit selbst ausgelieferten Schriften geht beim Laden der Schrift keine IP-Adresse mehr an Google. Das ist einer der wenigen Punkte, an dem eine technische Änderung eine rechtliche Frage auflöst, statt sie zu verwalten. Nach dem Web Almanac 2025 liefert inzwischen rund ein Drittel der Websites ausschließlich eigene Schriften aus, während Google Fonts noch auf 54 Prozent der Desktop- und 47 Prozent der mobilen Websites eingebunden ist.

Die Geschwindigkeit: kein Automatismus

Eine fremde Schriftquelle braucht zusätzliche Verbindungen — bei Google zwei, zu fonts.googleapis.com für das CSS und zu fonts.gstatic.com für die Dateien. Selbst ausgelieferte Schriften sparen diese Verbindungen.

Der frühere Vorteil des zentralen Dienstes ist weg: Früher lud ein Besucher eine beliebte Schrift einmal und nutzte sie auf allen Websites. Chrome trennt den Zwischenspeicher seit Version 86 (2020) nach Website, Safari trennt ebenfalls. Google schreibt in seinen häufigen Fragen selbst, dass das websiteübergreifende Zwischenspeichern nicht mehr zutrifft.

Ehrlich gesagt ist Selbst-Ausliefern trotzdem nicht automatisch schneller. web.dev weist darauf hin, dass der Web Almanac bei Seiten mit Schriften fremder Anbieter sogar eine schnellere Darstellung gemessen hat, und rät vor dem Umstieg zu prüfen, ob die eigene Seite über ein CDN und HTTP/2 ausgeliefert wird. Das entscheidende Argument ist in Deutschland das rechtliche. Die Geschwindigkeit ist ein Bonus, wenn der Server stimmt.

Das Format: WOFF2

Hier ist die Antwort eindeutig. WOFF2 komprimiert laut web.dev 30 Prozent besser als WOFF und wird überall unterstützt. web.dev rät, nur noch WOFF2 auszuliefern. Ältere Formate wie TTF, EOT oder WOFF zusätzlich mitzuliefern, bringt nur längere CSS-Regeln und die Gefahr doppelter Downloads.

Im Netz ist das weitgehend angekommen: WOFF2 macht laut Web Almanac 2025 rund 65 Prozent der Schriftabrufe aus. Wenn du eine Schrift als TTF herunterlädst, wandle sie vor dem Einbau um.

Der Umfang: Schnitte und Zeichen

Jede Schriftfamilie in jedem Schnitt ist eine eigene Datei. Drei Familien mit je vier Schnitten sind zwölf Dateien. Die mittlere mobile Startseite lädt laut Web Almanac 2025 122 KB Schriften.

Weniger Schnitte. Die meisten Websites kommen mit sehr wenigen aus — Regular und Bold, Kursiv nur, wenn es wirklich vorkommt. Ein häufiger Fehler: In der Einbindung sind alle Gewichte von 100 bis 900 angefordert, verwendet werden zwei. Der Browser lädt, was angefordert wurde.

Weniger Zeichen. Eine Schrift enthält oft kyrillische, griechische und vietnamesische Zeichen, die eine deutsche Website nie braucht. Ein Subsetting-Werkzeug beschränkt die Datei auf das Nötige, und über unicode-range im @font-face erfährt der Browser, welche Zeichen darin stecken. Die Google-Fonts-Schnittstelle kennt dafür den Parameter text=, der die Datei laut Google um bis zu 90 Prozent verkleinern kann — sinnvoll bei Logos und kurzen Überschriften mit bekanntem Text.

Variable Schriften. Eine variable Schrift enthält alle Gewichte in einer Datei. In einem Versuch von Monotype wurden 48 Einzeldateien zu einer, 88 Prozent kleiner. web.dev schränkt ein: Wer nur einen einzigen Schnitt nutzt, gewinnt damit nichts, denn die variable Datei ist größer als ein Einzelschnitt. Laut Web Almanac 2025 nutzen rund 40 Prozent der Websites mindestens eine variable Schrift.

Was während des Ladens passiert

Zwischen dem Moment, in dem der Text da ist, und dem Moment, in dem die Schrift ankommt, muss der Browser entscheiden, was er zeigt. Diese Entscheidung steuerst du mit font-display.

Ohne Angabe entscheidet der Browser, und viele blenden den Text aus, bis die Schrift da ist. Bei block dauert diese unsichtbare Phase laut web.dev zwei bis drei Sekunden. Bei langsamer Verbindung starrt der Besucher auf eine leere Fläche, obwohl der Text längst geladen ist.

Mit font-display: swap erscheint der Text sofort in einer Ersatzschrift und wird ausgetauscht, sobald die Webfont da ist. Das ist fast immer die richtige Wahl — laut Web Almanac 2025 setzt sie rund die Hälfte der Seiten:

@font-face {
  font-family: "Onest";
  src: url("/fonts/onest-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Der Preis von swap: Laufen Ersatzschrift und Webfont unterschiedlich breit, brechen die Zeilen beim Austausch anders um, und die Seite verschiebt sich. Drei Gegenmittel:

• Die Ersatzschrift angleichen. Mit size-adjust und ascent-override in einem eigenen @font-face für die Ersatzschrift lässt sie sich so skalieren, dass der Austausch kaum auffällt.
• Die kritischen Dateien vorab laden, damit sie früher da sind. Das crossorigin ist dabei Pflicht, auch wenn die Datei vom eigenen Server kommt:

<link rel="preload" href="/fonts/onest-regular.woff2" as="font" type="font/woff2" crossorigin>

• font-display: optional, wenn Stabilität wichtiger ist als die Schrift beim ersten Besuch: Kommt sie nicht sofort, bleibt die Ersatzschrift.

Vorab laden gehört nur an die ein oder zwei Dateien, die für den sichtbaren Bereich gebraucht werden. Wer alles vorab lädt, hat nichts gewonnen.

Und die schnellste Lösung von allen: eine Systemschrift. Sie ist schon auf dem Gerät, und der Text ist sofort da. Wenn die Schrift für die Marke nicht entscheidend ist, ist das eine ernsthafte Option — etwa für den Fließtext, während die Marke über die Überschriften getragen wird.

Wie du das selbst prüfst

Der Netzwerk-Reiter. Entwicklerwerkzeuge öffnen (F12), Reiter Netzwerk, Filter „Font", Seite neu laden. Du siehst jede Schriftdatei mit Herkunft und Größe. Drei Fragen an die Liste:

• Steht irgendwo fonts.gstatic.com oder fonts.googleapis.com?
• Wie viele Dateien sind es?
• Wie viel ergibt die Summe?

Der Quelltext-Schnelltest. Strg+U, dann Strg+F und nach fonts.googleapis.com suchen. Ein Treffer ist ein Fund. Aber: Ein Plugin oder Theme kann die Schrift auch aus einer nachgeladenen CSS-Datei anfordern. Dann steht sie nicht im Quelltext, taucht aber im Netzwerk-Reiter auf. Der Netzwerk-Reiter ist die verlässlichere Prüfung.

Der Drosselungstest. Im Netzwerk-Reiter eine langsame Verbindung einstellen und neu laden. Erscheint der Text erst nach einer Weile, fehlt font-display: swap. Erscheint er und die Seite verrutscht danach, siehst du den Austauscheffekt.

Was zu tun ist

1. Hol die Schriften auf den eigenen Server. Von Hand: Dateien als WOFF2 herunterladen, in einen Ordner im Projekt legen, die fremde Einbindung entfernen, je Schnitt eine @font-face-Regel mit passendem font-weight und font-style anlegen und eine Ersatzschrift in der Schriftliste angeben. In WordPress ab Version 6.5 erledigt das die Schriftbibliothek im Editor: Wer dort eine Google-Schrift installiert, bekommt die Datei auf den eigenen Server, abgelegt unter /wp-content/uploads/fonts.
2. Ergänze font-display: swap in allen @font-face-Regeln.
3. Reduziere die Schnitte auf die, die tatsächlich verwendet werden.
4. Lade die ein bis zwei kritischen Dateien vorab, mit crossorigin.
5. Prüf nach jedem Plugin- oder Theme-Wechsel neu. Manche bringen eigene Schriften mit und laden sie wieder von fremden Servern — auch wenn deine eigenen längst umgestellt sind. Das ist der häufigste Grund, warum ein behobenes Problem zurückkommt.

Und wenn du gerade neu baust: Entscheide die Schriftfrage vor dem Layout, nicht danach. Nachträglich Schnitte zu streichen heißt, die Gestaltung anzufassen.

Quellen

• Landgericht München I, Endurteil vom 20.01.2022, Az. 3 O 17493/20 — Unterlassung, 100 Euro Schadensersatz, kein berechtigtes Interesse, weil Google Fonts ohne Verbindung zu Google nutzbar sind: gesetze-bayern.de
• dejure.org, EuGH, Urteil vom 19.10.2016, C-582/14 (Breyer) — dynamische IP-Adressen als personenbezogene Daten: dejure.org
• Google Fonts, häufige Fragen — übertragene Daten beim Abruf, kein websiteübergreifendes Zwischenspeichern mehr: fonts.google.com
• Chrome for Developers, Gaining security and privacy by partitioning the cache — getrennter Zwischenspeicher seit Chrome 86: developer.chrome.com
• web.dev, Best practices for fonts — Selbst-Ausliefern nicht automatisch schneller, zwei Google-Adressen, WOFF2 30 Prozent besser als WOFF, Blockphase, size-adjust: web.dev
• HTTP Archive, Web Almanac 2025, Fonts — 88 Prozent mit Webfonts, Google Fonts 54 und 47 Prozent, ein Drittel nur eigene Schriften, 65 Prozent WOFF2, rund die Hälfte mit swap, rund 40 Prozent variable Schriften: almanac.httparchive.org
• HTTP Archive, Web Almanac 2025, Page Weight — 122 KB Schriften auf der mittleren mobilen Startseite: almanac.httparchive.org
• Google Fonts, CSS API v2 — Parameter text= bis zu 90 Prozent kleiner, display=swap: developers.google.com
• web.dev, Introduction to variable fonts on the web — 48 Dateien in einer, 88 Prozent kleiner: web.dev
• MDN, font-display — Block-, Tausch- und Ausfallphase der Werte: developer.mozilla.org
• Chrome for Developers, Ensure text remains visible during webfont load — unsichtbarer Text beim Laden: developer.chrome.com
• web.dev, CSS size-adjust for @font-face — Ersatzschrift angleichen gegen Verschiebungen: web.dev
• MDN, rel=preload — crossorigin bei Schriften auch vom eigenen Server: developer.mozilla.org
• WordPress Core, New Feature: Font Library — Google-Schriften werden beim Installieren auf den eigenen Server geladen: make.wordpress.org
• WordPress Developer Blog, How to register custom font collections for the Font Library — Ablage unter /wp-content/uploads/fonts: developer.wordpress.org