Google Fonts lokal einbinden: Schritt für Schritt umstellen und Ergebnis prüfen

01Google Fonts lokal einbinden: Schriftdateien auf den eigenen Server statt zu Google

Wer Google Fonts lokal einbinden will, lädt die Schriftdateien herunter, legt sie auf dem eigenen Webserver ab und verweist per @font-face-Regel darauf. Anschließend entfernen Sie jede Einbindung, die noch auf Google-Server zeigt. Danach baut der Browser beim Seitenaufruf keine Verbindung zu Google mehr auf. Die IP-Adresse Ihrer Besucher bleibt bei Ihnen.

Google Fonts lokal einbinden ist das Verfahren, bei dem die Schriftart im eigenen Webspace liegt und von dort geladen wird, ohne dass eine Verbindung zum Google-Server entsteht. Das Gegenstück ist die dynamische Einbindung. Dabei lädt der Browser die Schrift bei jedem Aufruf von Google nach.

Laut SELFHTML-Wiki zum Selbsthosten von Google-Fonts bietet Google Fonts (Stand 2025) fast 2000 Schriftfamilien an. Jede lässt sich mit einer Zeile HTML einbinden. Genau diese bequeme Zeile ist das Problem. Die Umstellung besteht aus vier Arbeitsschritten:

1. alle Stellen finden, an denen die Website Schriften von Google lädt,
2. die benötigten Schriftschnitte als WOFF2-Dateien herunterladen,
3. eigene @font-face-Regeln anlegen und die alten Verweise löschen,
4. im Browser prüfen, dass keine Anfrage an Google-Domains mehr erfolgt.

Der vierte Schritt wird am häufigsten übersprungen. Er entscheidet aber, ob die Umstellung tatsächlich wirkt.

02Welche Daten die dynamische Einbindung von Google Fonts an Google überträgt

Bei der dynamischen Einbindung überträgt der Browser beim Verbindungsaufbau zu den Google-Servern unter anderem die IP-Adresse des Besuchers. Das beschreibt eRecht24 in seinem Beitrag zu Datenschutz und Google Fonts. Der BGH hat dynamische IP-Adressen mit Urteil vom 16. Mai 2017 (VI ZR 135/13) als personenbezogene Daten eingeordnet. Voraussetzung ist, dass der Websitebetreiber rechtliche Mittel hat, die Person bestimmen zu lassen.

Die IP-Adresse ist nicht die einzige Angabe. Laut Blogmojo gehen beim Abruf einer Google-Schrift unter anderem diese Daten mit:

• der Zeitstempel der Anfrage,
• der User-Agent mit Browser- und Betriebssysteminformationen,
• der Referrer, also die aufrufende Seite,
• die IP-Adresse des Besuchers.

Technisch funktioniert die Einbindung über einen CSS-Generator. Hinter der Adresse https://fonts.googleapis.com/css2 erzeugt Google die nötigen @font-face-Deklarationen. Diese verweisen auf die eigentlichen WOFF2-Dateien auf gstatic.com. Ihr Besucher spricht also mit zwei Google-Domains, bevor er die erste Überschrift in der gewünschten Schrift sieht.

Google erklärt laut eRecht24, dass die Daten der Fonts API nicht für personalisierte Werbung oder Nutzerprofile verwendet werden. Laut Blogmojo setzen die Fonts zudem keine Cookies. Das ändert nichts daran, dass personenbezogene Daten an einen Dritten fließen. Dafür brauchen Sie eine Rechtsgrundlage.

03Rechtslage zu Google Fonts seit dem Urteil des LG München I von 2022

Das Landgericht München I hat am 20.01.2022 (Az. 3 O 17493/20) entschieden, dass die dynamische Einbindung von Google Fonts das Recht auf informationelle Selbstbestimmung verletzt. Das Gericht sprach dem Kläger 100 Euro zuzüglich Zinsen als Schadensersatz zu. Ausschlaggebend war die Übermittlung der IP-Adresse an Google ohne Einwilligung.

Das Urteil löste 2022 eine Welle von Abmahnungen aus. Laut Kopf & Stift erhielten tausende Websitebetreiber Zahlungsaufforderungen um die 170 Euro. Laut eRecht24 verschickten hauptsächlich zwei Kanzleien diese Schreiben. Das LG München I stufte die Massenabmahnungen am 30.03.2023 (Az. 4 O 13063/22) als rechtsmissbräuchlich ein. Die Abmahner hatten Websites automatisiert per Crawler durchsucht.

Die Grundfrage ist damit nicht erledigt. Nach dem Urteil des LG München I lässt sich die dynamische Einbindung nicht auf ein berechtigtes Interesse stützen, weil die lokale Einbindung möglich ist. Ob das allgemein gilt, ist umstritten. Ohne Einwilligung bleibt die dynamische Einbindung daher ein Risiko.

Das Data Privacy Framework regelt nur die Übermittlung in die USA. Laut eRecht24 brauchen Websitebetreiber trotzdem eine Rechtsgrundlage nach der DSGVO für die Verarbeitung selbst.

Offen sind noch drei Fragen, die der BGH am 28.08.2025 (Az. VI ZR 258/24) dem EuGH vorgelegt hat. Sie betreffen, wann eine IP-Adresse als personenbezogen gilt und ob bei absichtlich provozierten Verstößen ein immaterieller Schaden entsteht. Außerdem geht es darum, ob ein Anspruch bei Missbrauch entfällt. Für Ihre Website ist der sichere Weg unabhängig vom Ausgang derselbe: Schriften selbst hosten und keine Verbindung zu Google aufbauen.

Quelle: e-recht24.de, kopfundstift.de

04Bestandsaufnahme: alle Google-Fonts-Quellen einer Website finden

Vor dem Herunterladen klären Sie, welche Schriften Ihre Website von wo lädt. Eine remote eingebundene Google-Schrift erkennen Sie laut eRecht24 an Verweisen auf fonts.googleapis.com oder fonts.gstatic.com im Quellcode. Suchen Sie im Seitenquelltext nach beiden Domains.

Der Quelltext allein zeigt nicht alles. Manche Schriften lädt erst ein Skript nach dem Seitenaufbau. Laut HubSpot finden Sie in der Entwicklerkonsole des Browsers alle tatsächlich verwendeten Google Fonts. Öffnen Sie dort den Netzwerk-Tab, laden Sie die Seite neu und filtern Sie nach „font“ oder nach „gstatic“.

Notieren Sie für jede gefundene Schrift diese Angaben:

• den Namen der Schriftfamilie,
• die verwendeten Schnitte, etwa normal 400 und fett 700,
• ob kursive Varianten vorkommen,
• welche Datei oder welches Plugin die Einbindung auslöst.

Die letzte Angabe ist die wichtigste. Laut Blogmojo laden auch Google Maps, reCAPTCHA und Plugins wie NextGEN Gallery Google Fonts nach, letzteres die Schrift Open Sans. Prüfen Sie mehrere Seitentypen, nicht nur die Startseite. Kontaktseiten mit Formular und Seiten mit eingebetteten Karten oder Videos verraten oft zusätzliche Quellen.

05Schriftdateien herunterladen: WOFF2, unicode-range und Lizenz prüfen

Für die lokale Einbindung brauchen Sie die Schriftdateien im WOFF2-Format. Wenn Sie die WOFF2-Dateien selbst hosten, gehen keine Daten mehr an Google. Ihr eigener Server verarbeitet beim Ausliefern weiterhin die IP-Adresse, wie bei jedem Seitenaufruf. Das decken Sie in der Regel über den Abschnitt zu den Server-Logfiles in Ihrer Datenschutzerklärung ab. Google erlaubt das Selbsthosten, fördert es aber nicht.

Werkzeuge zum Herunterladen

ThemeWare empfiehlt den kostenfreien Dienst google-webfonts-helper. Laut HubSpot erzeugt das Werkzeug den passenden CSS-Code und liefert die Schriften als ZIP-Datei. SELFHTML nennt zwei weitere Hilfen mit einem wichtigen Unterschied: FontDownloader unterstützt kein unicode-range, fontsource dagegen schon.

unicode-range ist eine Angabe in der @font-face-Regel, die festlegt, für welche Zeichen eine Datei zuständig ist. Der Browser lädt dann nur die WOFF2-Dateien, die er für die dargestellten Zeichen braucht. Für eine deutschsprachige Website genügt in der Regel der lateinische Zeichensatz.

Lizenz und Versionen

Google-Fonts stehen laut SELFHTML in der Regel unter der SIL Open Font Licence. Diese gibt weitgehende Freiheiten für Benutzung und Änderung. Es gibt aber auch Schriften mit anderen Lizenzen, die eventuell einen Vermerk auf Ihrer Seite verlangen. Prüfen Sie die Lizenz jeder Schrift vor dem Einsatz.

Google versioniert die Schriften. Das erkennen Sie an einem Pfadteil wie v49 in den Dateiadressen. Laden Sie nur die Schnitte herunter, die Ihre Bestandsaufnahme ergeben hat.

06@font-face-Regeln anlegen und die Einbindung über Google-Server entfernen

Die lokale Einbindung besteht aus einer CSS-Datei mit @font-face-Regeln und den WOFF2-Dateien daneben. Das folgende Beispiel legen Sie als fonts.css in einen Ordner /fonts/ auf Ihrem Webserver, zusammen mit den heruntergeladenen Dateien.

/* Datei: /fonts/fonts.css, liegt im selben Ordner wie die WOFF2-Dateien */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('open-sans-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('open-sans-latin-700.woff2') format('woff2');
}

/* Schrift verwenden, mit Systemschriften als Rueckfall */
body {
  font-family: 'Open Sans', Arial, sans-serif;
}

Anzupassen sind der Name in font-family, die Werte für font-weight und die Dateinamen in url(). Die Angabe format bezieht sich jeweils auf die zugehörige url, wie eine Antwort im Shopware-Forum erklärt. Der Browser sucht die Dateien relativ zu der Datei, in der die @font-face-Regel steht. Liegt die CSS-Datei woanders, passen Sie den Pfad an.

Im zweiten Schritt ersetzen Sie im <head> Ihrer Seiten den Verweis auf Google durch Ihre eigene Datei:

<!-- vorher: den link-Eintrag entfernen, dessen href auf fonts.googleapis.com/css2 zeigt -->

<!-- nachher: eigene Datei -->
<link rel="stylesheet" href="/fonts/fonts.css">

Laut HubSpot müssen Sie sämtliche bisherigen Einbindungen über den Google-Server löschen. Eine lokale Kopie neben einem verbliebenen Google-Verweis bringt datenschutzrechtlich nichts.

07Google Fonts lokal einbinden in WordPress: Font Library, Theme-Optionen und Plugins

WordPress bringt laut Kopf & Stift seit Version 6.5 eine eigene Font Library mit. Sie speichert Google Fonts lokal im Ordner /wp-content/fonts/. Für Block-Themes ist das der einfachste Weg.

Viele Themes und Page-Builder haben eigene Schalter. Diese Einstellungen nennt die Quellenlage:

• Astra: Option „Load Google Fonts Locally“ in den Theme-Einstellungen,
• Elementor: dieselbe Option, seit Version 3.32.1 standardmäßig deaktiviert und daher selbst zu aktivieren,
• Avada: unter Theme Options, Advanced, Privacy, Google Fonts Mode,
• perfmatters: im Untermenü „Fonts“ die Optionen „Disable Google Fonts“ und „Local Google Fonts“.

Das Plugin OMGF erkennt laut Kopf & Stift automatisch Google Fonts, lädt sie herunter und schreibt die Adressen um. Die kostenlose Version hat Grenzen. Laut eRecht24 erkennt sie fast ausschließlich Google Fonts in Themes. Laut Blogmojo findet sie keine Schriften, die per JavaScript nachgeladen werden.

Ältere Plugins sollten Sie ersetzen. Easy Google Fonts erhält laut Kopf & Stift seit Jahren kein Update mehr. WP Google Fonts wurde aus dem WordPress-Verzeichnis entfernt. Wer die Regeln von Hand einbaut, nutzt laut HubSpot ein Child-Theme. So überschreibt das nächste Theme-Update Ihre @font-face-Regeln nicht.

08Google Fonts lokal einbinden in Shopware 6 mit dem Ordner public

Für selbst gehostete Shopware-6-Shops beschreibt die ThemeWare-Anleitung zum lokalen Einbinden von Fonts einen klaren Ablauf. In der Shopware 6 Cloud sind laut dieser Anleitung keine individuellen Anpassungen möglich. Bearbeiten Sie nie Originaldateien von Shopware oder von Erweiterungen.

Der einfachste Weg ist laut ThemeWare, die Dateien im Ordner public der Installation bereitzustellen. Die Schritte im Überblick:

1. die WOFF2-Dateien per FTP nach public/fonts/ hochladen,
2. im Ordner public/css/ die Datei fonts.css mit den @font-face-Regeln anlegen,
3. in ThemeWare die Option „Google Fonts importieren“ deaktivieren,
4. im Feld „Externe CSS-Datei“ der Experten-Einstellungen den Pfad zur fonts.css eintragen,
5. prüfen, dass der Experten-Modus aktiv und der Debug-Modus in den Plugin-Einstellungen deaktiviert ist,
6. speichern, damit das Theme kompiliert wird und die Änderung in der Storefront greift.

Für dauerhafte Anpassungen empfiehlt ThemeWare eine separate Erweiterung, also ein Plugin oder eine App. Im Shopware-Forum zur lokalen Einbindung von Google Fonts kam ein weiterer Hinweis. Der @font-face-Code gehört in die CSS-Datei des Themes, nicht in eine TPL-Datei. Danach müssen Sie den Cache leeren, das Theme neu kompilieren und gegebenenfalls den Pfad zur Schrift anpassen.

09Google Maps, YouTube und reCAPTCHA laden Google Fonts selbst nach

Eingebettete Google-Dienste laden ihre eigenen Schriften von Google, auch wenn Ihr Theme längst lokal arbeitet. Laut eRecht24 betrifft das Google Maps, reCAPTCHA und YouTube. Die Schriften dieser Dienste lassen sich nicht lokal einbinden.

Solche Anfragen erkennen Sie laut einem Beitrag im Shopware-Forum an der Angabe unicode-range in den nachgeladenen Regeln. Ein anderer Teilnehmer fand die Ursache in einem eingebetteten Video. Sein Team band das Video daraufhin nativ per Skript ein und umging so das Nachladen.

Für eingebettete Dienste haben Sie damit drei Möglichkeiten:

• den Dienst entfernen, wenn er verzichtbar ist,
• den Dienst erst nach Einwilligung des Besuchers laden,
• den Inhalt anders einbinden, etwa ein Video ohne den eingebetteten Player.

Ähnlich verhält es sich mit Adobe Fonts. Laut eRecht24 werden sie grundsätzlich nur über Adobe-Server ausgeliefert, eine lokale Einbindung ist in der Regel nicht möglich. Kopf & Stift nennt Bunny Fonts als EU-gehosteten, trackingfreien Ersatz für die Google-Fonts-API. Auch dabei lädt der Browser die Schrift von einem fremden Server. Wer gar keine externe Anfrage will, hostet selbst.

10Prüfung nach der Umstellung: keine Anfrage mehr an fonts.googleapis.com und fonts.gstatic.com

Die Umstellung ist erst abgeschlossen, wenn der Browser beim Seitenaufruf keine einzige Anfrage an fonts.googleapis.com oder fonts.gstatic.com mehr stellt. Laut Blogmojo laufen Google Fonts in der Regel über genau diese beiden Domains. Prüfen Sie deshalb gezielt danach.

So gehen Sie im Browser vor:

1. ein privates Fenster öffnen, damit kein zwischengespeicherter Stand stört,
2. die Entwicklerwerkzeuge öffnen und den Netzwerk-Tab wählen,
3. die Seite neu laden und nach „google“ sowie „gstatic“ filtern,
4. im Filter „Font“ prüfen, dass alle Schriftdateien von Ihrer eigenen Domain kommen,
5. den Vorgang auf weiteren Seitentypen wiederholen.

Leeren Sie vorher den Cache Ihres Caching-Plugins oder Ihres Shops. Sonst liefert der Server womöglich noch die alte Seite mit dem Google-Verweis aus. Ergänzend durchsuchen Sie den Quelltext der Seite nach beiden Domains.

Wir bei Svennis prüfen nach jeder Schriftumstellung neben der Startseite immer gezielt eine Seite mit Formular und eine Seite mit eingebetteter Karte oder eingebettetem Video. Dort tauchen die verbliebenen Google-Anfragen erfahrungsgemäß auf, weil reCAPTCHA, Karten und Player ihre Schriften selbst nachladen.

Wiederholen Sie die Prüfung nach Theme- und Plugin-Updates. Ein Update kann eine Einbindung zurückbringen, die Sie bereits entfernt hatten.

11Ladezeit und Darstellung nach dem Umstieg auf lokale Google Fonts

Lokal eingebundene Schriften verlieren keinen Geschwindigkeitsvorteil, den Google früher geboten hätte. Seit Chrome mit Version 86 die Cache-Partitionierung eingeführt hat, gibt es laut Kopf & Stift keinen geteilten Browser-Cache des Google-CDN mehr. Ein Besucher hat eine Google-Schrift also nicht schon von einer anderen Website gespeichert.

HubSpot weist auf zwei mögliche Nachteile hin. Die lokale Einbindung führe gegebenenfalls zu längeren Ladezeiten. Außerdem sei mit einer größeren Serverlast zu rechnen, weil Ihr Server die Schriften selbst ausliefert. Beides fällt kleiner aus, wenn Sie nur die tatsächlich genutzten Schnitte im WOFF2-Format bereitstellen.

Wichtiger für die Darstellung sind zwei Effekte beim Laden. FOIT (Flash of Invisible Text) bedeutet, dass kein Text erscheint, bis die Schrift geladen ist. FOUT (Flash of Unstyled Text) bedeutet, dass zuerst eine Systemschrift erscheint und dann durch die Webschrift ersetzt wird. Laut Blogmojo können beide Effekte einen hohen Cumulative Layout Shift auslösen. Dann besteht die Seite den Core-Web-Vitals-Test womöglich nicht.

Wenige Schnitte und eine passende Systemschrift als Rückfall in font-family halten diese Effekte klein. Wenn Ladezeit und Darstellung ohnehin Schwächen zeigen, lohnt ein Blick auf die gesamte Website im Rahmen eines Website-Relaunchs mit Fokus auf Geschwindigkeit.

12Nächste Schritte zur lokalen Einbindung von Google Fonts auf Ihrer Website

Beginnen Sie mit der Prüfung, nicht mit dem Herunterladen. Öffnen Sie heute Startseite, Kontaktseite und eine Seite mit Karte oder Video im Netzwerk-Tab. Notieren Sie jede Anfrage an fonts.googleapis.com und fonts.gstatic.com mit ihrer Quelle.

Danach arbeiten Sie die Liste in dieser Reihenfolge ab:

1. Theme- und Plugin-Schalter für lokale Schriften aktivieren, wo es sie gibt,
2. verbliebene Schriften als WOFF2 herunterladen und die Lizenz prüfen,
3. @font-face-Regeln im Child-Theme oder in einer eigenen Erweiterung anlegen,
4. alle alten Verweise auf Google-Server löschen,
5. eingebettete Google-Dienste entfernen, ersetzen oder hinter eine Einwilligung legen,
6. Cache leeren und die Prüfung im Netzwerk-Tab wiederholen.

Halten Sie das Ergebnis fest: welche Schriften lokal liegen, wo die CSS-Datei steht und welche Seiten Sie geprüft haben. Diese Notiz hilft nach dem nächsten Update und bei Fragen zur Datenschutzerklärung.

Wenn Ihre Website auf einem veralteten Theme oder vielen verwaisten Plugins läuft, ist die Schriftumstellung oft nur ein Symptom. Dann lohnt sich ein Blick darauf, ob ein Relaunch Ihrer Firmenwebsite den Aufwand für Datenschutz, Geschwindigkeit und Pflege insgesamt senkt.

13Quellen

• Kopf & Stift: Google Fonts lokal einbinden, DSGVO-konform mit WordPress
• eRecht24: Google Fonts lokal einbinden, so geht's
• ThemeWare Wissensdatenbank: Fonts lokal einbinden
• Blogmojo: Google Fonts lokal und DSGVO-konform in WordPress einbinden
• SELFHTML-Wiki: Google-Fonts selbst hosten
• HubSpot: Google Fonts lokal und DSGVO-konform einbinden
• Shopware Community Forum: Google Fonts lokal einbinden