Google Fonts lokal einbinden — Schritt für Schritt

Warum das Selbsthosten nötig ist

Google Fonts gibt es in zwei Formen. Die eine ist ein Katalog frei lizenzierter Schriften, die jeder herunterladen darf. Die andere ist ein Auslieferungsdienst: Eine Zeile im Quelltext bittet den Browser, die Schrift von fonts.googleapis.com und fonts.gstatic.com zu holen. Genau diese zweite Form ist das Problem. Der Browser jedes Besuchers baut dabei eine Verbindung zu Google auf und übermittelt zwangsläufig seine IP-Adresse — Google bestätigt in seiner FAQ, dass die Anfragen die IP-Adresse, die aufgerufene URL und Browser-Kennung enthalten, auch wenn keine Cookies gesetzt werden (Stand 10.09.2026).

Die IP-Adresse ist ein personenbezogenes Datum (EuGH, 19.10.2016, C-582/14). Ihre Übermittlung an einen Dritten braucht eine Rechtsgrundlage nach Art. 6 Abs. 1 DSGVO. Eine Einwilligung liegt nicht vor, und ein berechtigtes Interesse scheitert daran, dass es ein milderes Mittel gibt: die Schrift selbst zu hosten. So hat es das Landgericht München I am 20. Januar 2022 (Az. 3 O 17493/20) entschieden und dem Kläger 100 € Schadenersatz nach Art. 82 DSGVO zugesprochen. Das Bayerische Landesamt für Datenschutzaufsicht empfiehlt in seinen FAQ ausdrücklich, Schriften „über den eigenen Webserver einzubinden und selbst zu hosten“. Die Hintergründe des Urteils und der anschließenden Abmahnwelle stehen im Wissensteil der Startseite; hier geht es um die Umsetzung.

Schritt 0: Ist Ihre Seite betroffen?

Bevor Sie etwas ändern, sehen Sie nach, was Ihre Seite tatsächlich lädt. Öffnen Sie sie in Firefox oder Chrome, drücken Sie F12 und wechseln Sie in den Reiter Netzwerk. Laden Sie die Seite mit Strg+F5 neu und tippen Sie in das Filterfeld font. Jetzt sehen Sie jede Schriftdatei, die der Browser geholt hat, und in der Spalte „Domain“ oder „Name“, woher: Steht dort fonts.gstatic.com oder fonts.googleapis.com, lädt Ihre Seite von Google. Alternativ öffnen Sie den Quelltext (Strg+U) und suchen nach googleapis.

Notieren Sie sich dabei drei Dinge, die Sie für die Umstellung brauchen: den Namen der Schrift (etwa „Open Sans“), die Schnitte (Regular, Bold, Italic — in der URL als wght@400;700 oder :400,700) und die Stelle, an der die Zeile eingefügt wird: im Theme, in einem Plugin, im Baukasten oder in Ihrem eigenen Stylesheet. Der letzte Punkt entscheidet, welcher der Wege unten für Sie gilt.

Die fünf Schritte im Überblick

Schritte 1 und 2: Schriften herunterladen und hochladen

Weg A: google-webfonts-helper

Das quelloffene Werkzeug google-webfonts-helper von Mario Ranftl (MIT-Lizenz) ist der schnellste Weg. Sie wählen die Schrift, kreuzen die Zeichensätze an — für deutsche Seiten reicht meist latin, bei Namen mit ł, ő oder č zusätzlich latin-ext —, wählen die Schnitte und bekommen zwei Dinge: ein ZIP mit den Schriftdateien und eine fertige @font-face-Regel, in der Sie den Pfad zu Ihrem Font-Ordner eintragen. Wählen Sie bei den Formaten „Modern Browsers“: Dann enthält das Paket nur WOFF2, das alle aktuellen Browser verstehen und das deutlich kleiner ist als TTF.

Weg B: direkt aus dem Google-Fonts-Katalog

Auf fonts.google.com lässt sich jede Familie als ZIP herunterladen. Sie erhalten dann TTF-Dateien und die Lizenz — häufig eine einzige „variable“ Datei, die alle Strichstärken enthält. Das funktioniert, ist aber größer als nötig; wer die Dateien nicht selbst in WOFF2 umwandeln möchte, fährt mit Weg A besser. Wichtig bei beiden Wegen: Die Lizenzdatei gehört mit auf den Server. Die Schriften im Katalog stehen überwiegend unter der SIL Open Font License 1.1, einige unter Apache 2.0 — beide erlauben das Selbsthosten ausdrücklich, verlangen aber, dass der Lizenztext erhalten bleibt.

Laden Sie die Dateien anschließend auf Ihren Server, etwa in einen Ordner /fonts/ neben Ihrem Stylesheet. Bei den meisten Hostern geht das über den Dateimanager im Kundenkonto oder per SFTP. Merken Sie sich den Pfad — er kommt gleich in die Regel.

Schritt 3: Die @font-face-Regel

Eine @font-face-Regel sagt dem Browser, unter welchem Namen eine Schriftdatei ansprechbar ist. Sie brauchen eine Regel je Schnitt. So sieht das für „Open Sans“ in Regular und Bold aus:

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/open-sans-v40-latin-regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/open-sans-v40-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
body { font-family: "Open Sans", Arial, sans-serif; }

Zwei Zeilen darin verdienen eine Erklärung. font-display: swap weist den Browser an, den Text sofort in einer Ersatzschrift zu zeigen und die eigene Schrift einzutauschen, sobald sie geladen ist. Ohne diese Angabe darf der Browser den Text kurz unsichtbar lassen — bei langsamen Verbindungen sieht der Besucher dann eine leere Seite. unicode-range nennt die Zeichen, die in der Datei enthalten sind. Der Browser lädt die Datei dann nur, wenn die Seite solche Zeichen enthält; wer latin und latin-ext als getrennte Dateien ausliefert, spart so bei den meisten Aufrufen die zweite. Die oben gezeigte Liste ist der Bereich, den Google selbst für sein latin-Paket ausliefert; google-webfonts-helper fügt sie automatisch ein.

Die Regel kommt an den Anfang Ihres Stylesheets oder in eine eigene Datei fonts.css, die Sie im <head> einbinden. Anschließend Schritt 4: Suchen Sie im Quelltext und in allen Stylesheets nach googleapis und entfernen Sie den <link> beziehungsweise das @import. Bleibt die alte Zeile stehen, lädt der Browser beide Quellen — und die Umstellung bringt nichts.

WordPress

Bei WordPress hängt der Weg davon ab, wer die Google-Zeile einfügt. Meist ist es das Theme, manchmal ein Page-Builder oder ein Formular-Plugin. Drei Möglichkeiten, in aufsteigender Reihenfolge des Aufwands:

Theme-Optionen prüfen. Viele Themes bieten unter „Customizer → Typografie“ einen Schalter wie „Google Fonts lokal laden“ oder „Schriften selbst hosten“. Ist er da, ist das die sauberste Lösung, weil das Theme die Dateien selbst verwaltet. Fehlt er, prüfen Sie, ob das Theme Systemschriften anbietet — dann entfällt das Laden ganz.

Font Library nutzen. Seit WordPress 6.5 (April 2024) gibt es im Website-Editor der Block-Themes eine Schriftenbibliothek. Wer dort eine Google-Schrift installiert, lädt sie auf den eigenen Server — WordPress schreibt in der Ankündigung ausdrücklich, dass die Datei „auf den WordPress-Server heruntergeladen“ wird, standardmäßig nach wp-content/fonts. Das setzt ein Block-Theme voraus; klassische Themes haben den Editor nicht.

Plugin einsetzen. Für klassische Themes gibt es Plugins, die Google-Aufrufe abfangen, die Dateien herunterladen und den Aufruf umschreiben — bekannte Namen sind „OMGF“ und „Local Google Fonts“; die Auswahl ist Ihre Sache, wir bewerten sie hier nicht. Wichtig ist bei jedem Plugin dieselbe Kontrolle wie sonst: Netzwerkanalyse nach der Aktivierung, auf mehreren Unterseiten, auch bei eingeloggtem Nutzer. Manche Plugins ersetzen die Aufrufe nur auf der Startseite oder lassen den Editor aus.

Baukästen: Wix, Jimdo, Squarespace

In Baukästen haben Sie keinen Zugriff auf den Quelltext; ob Schriften von Google oder vom Anbieter geliefert werden, entscheidet der Anbieter. Das heißt: Die Netzwerkanalyse aus Schritt 0 ist hier der Weg, um Klarheit zu bekommen — und sie ist nach jedem Design-Wechsel zu wiederholen. Was sich zu den drei großen Anbietern belegen lässt (Stand 10.09.2026):

Bei allen Baukästen gilt außerdem: Ein hochgeladenes Design-Element, ein eingebettetes Formular oder ein Widget eines Drittanbieters kann eigene Schriftaufrufe mitbringen. Deshalb nicht nur die Startseite prüfen.

Schritt 5: Kontrolle per Netzwerkanalyse

Die Kontrolle ist dieselbe wie Schritt 0, nur mit dem Ziel „nichts“: Reiter Netzwerk, Filter font, Seite neu laden. Alle Schriftdateien müssen jetzt von Ihrer eigenen Domain kommen. Löschen Sie dafür den Browser-Cache oder nutzen Sie ein privates Fenster, damit keine alten Dateien aus dem Zwischenspeicher das Bild verfälschen. Löschen Sie dann den Filter und sehen Sie die gesamte Liste durch: Erscheint irgendwo gstatic, googleapis oder eine andere fremde Domain, gibt es noch eine Quelle — oft ein Plugin, ein eingebettetes Video oder eine Karte, die dann ein eigenes Thema sind (siehe Prüfpunkt 8 im Wissensteil).

Zum Schluss die Datenschutzerklärung: Wenn sie einen Absatz „Google Fonts“ enthält, der das Laden von Google-Servern beschreibt, stimmt er jetzt nicht mehr — streichen Sie ihn oder ersetzen Sie ihn durch einen Satz, dass Schriften lokal ausgeliefert werden und keine Verbindung zu Google entsteht. Wie die Erklärung insgesamt zur Seite passen muss, steht im Artikel Datenschutzerklärung für kleine Websites.

Typische Fehler

Die alte Zeile bleibt stehen. Die häufigste Panne: Die lokale Regel ist drin, der <link> zu Google auch. Der Browser lädt dann beides. Quelltext nach googleapis durchsuchen, auch in Child-Themes und Plugin-Einstellungen.

Falscher Pfad. Steht in src: url(…) ein Pfad, der nicht existiert, zeigt der Browser stumm die Ersatzschrift. In der Netzwerkanalyse erscheint die Datei dann mit Status 404. Pfad prüfen, Groß- und Kleinschreibung beachten.

Nur die Startseite geprüft. Formular-Plugins, Shop-Systeme und Kalender laden ihre Schriften oft nur auf den Seiten, auf denen sie vorkommen. Prüfen Sie Kontakt-, Shop- und Blogseiten getrennt.

Zu viele Schnitte. Wer alle neun Strichstärken einer Familie einbindet, lädt Hunderte Kilobyte, von denen die Seite zwei nutzt. Regular, Bold und vielleicht Italic reichen fast immer.

Icon-Schriften vergessen. Font Awesome, Material Icons und ähnliche Icon-Sets werden oft ebenfalls von fremden Servern geladen. Für sie gilt dieselbe Anleitung — oder Sie ersetzen sie durch Inline-SVGs.

Häufige Fragen