Google Fonts DSGVO-konform einbinden: So hostest du sie lokal

Google Fonts sind nur dann DSGVO-konform, wenn deine Website sie nicht bei jedem Aufruf von Google-Servern nachlädt. Die Lösung ist simpel: Du lädst die Schriftdateien herunter und lieferst sie von deinem eigenen Hosting aus. Das dauert etwa 15 bis 30 Minuten und kostet nichts.

Ich zeige dir in diesem Artikel, warum das Thema überhaupt Ärger macht, wie du prüfst, ob deine Website betroffen ist, und wie du Google Fonts lokal einbindest, auch in Webflow.

Kurz vorweg: Ich bin Webdesigner und kein Anwalt. Dieser Artikel ist keine Rechtsberatung. Er zeigt dir, was technisch passiert und was du dagegen tun kannst. Bei einer konkreten Abmahnung oder Unsicherheit holst du dir rechtlichen Rat.

Warum sind Google Fonts ein DSGVO-Thema?

Die gängige Einbindung ist bequem: Eine Zeile Code im Head der Seite, und der Browser holt sich die Schrift direkt von Google. Genau dabei geht die IP-Adresse des Besuchers an Google, bei jedem Seitenaufruf und ohne dass jemand zugestimmt hat. IP-Adressen gelten als personenbezogene Daten.

Das Landgericht München I hat das in einem Urteil vom 20. Januar 2022 (Az. 3 O 17493/20) so bewertet. Der Betreiber einer Website musste einem Besucher 100 € Schadensersatz zahlen und es künftig unterlassen. Ein Argument des Gerichts: Es gibt eine einfache Alternative, nämlich die Schriften lokal auf dem eigenen Server zu speichern. Ein berechtigtes Interesse am Laden von Googles Servern sah das Gericht deshalb nicht.

Danach kam eine Abmahnwelle. Tausende Website-Betreiber bekamen fast identische Schreiben mit Forderungen von 100 bis 170 €. Später haben Gerichte einen Teil dieser Massenabmahnungen als rechtsmissbräuchlich eingestuft, unter anderem das Landgericht München I im März 2023. Gegen die Beteiligten ermittelte außerdem die Berliner Staatsanwaltschaft.

Was heißt das heute für dich? Das Münchner Urteil ist eine Entscheidung eines Landgerichts, kein höchstrichterliches Urteil. Durch das EU-US Data Privacy Framework hat sich die Lage bei Datenübermittlungen in die USA seit 2023 außerdem etwas entspannt. Trotzdem bleibt das Laden von Google-Servern ein vermeidbares Risiko. Wenn die Alternative gratis, schnell umgesetzt und sogar besser für die Ladezeit ist, gibt es keinen guten Grund, das Risiko einzugehen.

‍

Lädt deine Website Google Fonts von Google?

Das lässt sich in zwei Minuten prüfen, und du musst dafür nichts programmieren.

1. Öffne deine Website in Chrome und drücke F12, um die Entwicklertools zu öffnen.
2. Wechsle in den Tab „Network" (Netzwerk).
3. Setze einen Haken bei „Disable cache" und lade die Seite neu.
4. Tippe in das Filterfeld „fonts.g". Siehst du Anfragen an fonts.googleapis.com oder fonts.gstatic.com, lädt deine Seite Schriften von Google.

Alternativ suchst du im Quelltext (Rechtsklick, „Seitenquelltext anzeigen", dann Strg+F) nach „googleapis". Achte auch auf Vorlagen und Plugins. Bei WordPress laden Themes und Page Builder oft eigene Google Fonts nach, selbst wenn du selbst nichts eingebunden hast. Dasselbe gilt für Icon-Schriften wie Material Icons, die ebenfalls über Google ausgeliefert werden können.

Ein Cookie-Banner löst das Problem übrigens nur, wenn die Schriften erst nach der Zustimmung geladen werden. In der Praxis ist das unpraktisch, weil die Seite dann zuerst mit Standardschrift erscheint und danach springt. Lokales Hosting ist der saubere Weg.

Google Fonts lokal hosten: Der Ablauf im Überblick

Das Prinzip ist immer gleich:

1. Schrift bei Google Fonts herunterladen
2. In das Format WOFF2 bringen
3. Die Dateien auf dein eigenes Hosting legen (oder in Webflow hochladen)
4. Die Schrift per CSS einbinden
5. Die alte Einbindung von Google entfernen
6. Im Network-Tab prüfen, dass keine Anfragen mehr an Google gehen

Der letzte Punkt wird am häufigsten vergessen. Bleibt irgendwo noch ein alter Link zu Google im Code, hast du am Ende beides: die lokale Schrift und die Verbindung zu Google.

Schritt für Schritt für eine normale Website

1. Schrift herunterladen. Auf fonts.google.com wählst du die Schrift und lädst die Familie herunter. Du bekommst meist TTF-Dateien. Die meisten Google Fonts stehen unter der Open Font License (OFL), die das Hosten auf der eigenen Website erlaubt. Die Lizenz steht auf der Seite der jeweiligen Schrift. Prüf sie kurz, bevor du die Schrift einsetzt.

2. In WOFF2 umwandeln. WOFF2 ist das Format für das Web: kleiner als TTF und von allen aktuellen Browsern unterstützt. Fertige WOFF2-Dateien samt passendem CSS bekommst du zum Beispiel über den Google Webfonts Helper oder das Fontsource-Paket. Alternativ wandelst du die Dateien mit einem Konverter um.

3. Dateien hochladen. Leg die WOFF2-Dateien in einen Ordner auf deinem Server, zum Beispiel /fonts/. Achte auf exakt gleiche Groß- und Kleinschreibung in den Dateinamen.

4. Per CSS einbinden. Mit einer @font-face-Regel sagst du dem Browser, wo die Schrift liegt:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Inter", system-ui, sans-serif;
}

‍

font-display: swap sorgt dafür, dass der Text sofort in einer Ersatzschrift erscheint, bis die eigentliche Schrift geladen ist. So bleibt die Seite nie leer. Die Beispielwerte gelten für eine Variable Font. Bei klassischen Schriften legst du pro Schnitt (Regular, Bold usw.) eine eigene Regel an. Mehr zu flexiblen Schriften findest du im Artikel über Variable Fonts.

Wenn du die wichtigste Schrift schon beim Laden der Seite brauchst, kannst du sie im Head vorab laden lassen:

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

‍

5. Alte Einbindung entfernen. Such im Code nach diesen Resten und lösche sie:

• <link rel="preconnect" href="https://fonts.googleapis.com">
• <link rel="preconnect" href="https://fonts.gstatic.com">
• <link href="https://fonts.googleapis.com/css2?...">
• @import url("https://fonts.googleapis.com/...") im CSS

6. Prüfen. Wiederhole den Test aus dem vorigen Abschnitt. Im Network-Tab darf kein Eintrag mit „fonts.g" mehr auftauchen.

‍
‍

Google Fonts in Webflow DSGVO-konform nutzen

In Webflow gehst du ähnlich vor, nur ohne eigenen Server. Webflow nimmt dir den Upload ab:

1. Lade die Schrift bei Google Fonts herunter und bring sie ins WOFF2-Format. Webflow akzeptiert WOFF2, WOFF, TTF, OTF, EOT und SVG, empfiehlt aber WOFF2, weil die Dateien deutlich kleiner sind. Pro Datei sind maximal 4 MB erlaubt.
2. Öffne die Site Settings und wechsle in den Tab „Fonts". Im Bereich „Custom fonts" lädst du die Dateien hoch.
3. Vergib den Familiennamen, das Schriftgewicht und den Stil für jede Datei. Alle Schnitte einer Schrift bekommen denselben Familiennamen.
4. Stelle bei „Font display" auf „swap".
5. Öffne den Designer neu, wähle die neue Schrift in deinen Styles und ersetze die bisherigen Google Fonts.
6. Entferne die alten Google Fonts aus der Integration im selben Fonts-Tab. Dann veröffentlichst du die Seite neu.

Achtung bei gleichen Namen. Das ist der Stolperstein, den ich dir ersparen will: Webflow weist selbst darauf hin, dass eine hochgeladene Schrift mit demselben Namen wie eine Webflow-Standardschrift aus Google Fonts (zum Beispiel Montserrat oder Roboto) weiterhin von Googles Servern geladen werden kann. Gib der lokalen Schrift deshalb einen eindeutigen Namen, etwa „Montserrat-Local".

Danach immer testen. Öffne die veröffentlichte Seite (nicht den Designer) und prüfe im Network-Tab, ob noch irgendeine Anfrage an Google geht. Auch Webflow-Templates und eingebettete Elemente können eigene Verbindungen mitbringen.

‍

Weitere Google-Dienste, die du im Blick haben solltest

Google Fonts ist selten das einzige Problem. Diese Einbindungen laden ebenfalls Daten von Google oder anderen Anbietern, sobald deine Seite aufgerufen wird:

• Google Maps: am besten erst nach Klick laden oder durch ein statisches Bild mit Link ersetzen
• YouTube-Videos: mit der datenschutzfreundlichen Einbettung oder erst nach Einwilligung laden
• reCAPTCHA: Alternativen wie Cloudflare Turnstile oder ein Honeypot-Feld nutzen
• Google Analytics: nur nach Einwilligung, oder gleich eine datenschutzfreundliche Alternative einsetzen

Einen Überblick über alle wichtigen Punkte findest du in meiner DSGVO-Checkliste für Websites.

‍

Lokal hosten ist auch besser für die Ladezeit

Datenschutz ist der Hauptgrund, aber nicht der einzige. Wer Schriften selbst ausliefert, spart Verbindungen zu fremden Servern. Seit Browser den Cache pro Website trennen, bringt der frühere Vorteil eines gemeinsam genutzten Google-Caches ohnehin nichts mehr. Du kontrollierst außerdem, welche Schnitte geladen werden. Wer nur Regular und Bold braucht, lädt auch nur diese beiden. Das wirkt sich auf deine Ladegeschwindigkeit und die Core Web Vitals aus.

Mein Tipp: Nimm dir bei der Gelegenheit auch die Schriftauswahl vor. Zwei Schriften mit wenigen Schnitten reichen für fast jede Website. Ideen dazu findest du in den Artikeln über die 20 besten Google Fonts, Open-Source-Schriftarten und die Wahl der richtigen Schriftart.

Meine Checkliste für Google Fonts

• Im Network-Tab keine Anfragen an fonts.googleapis.com oder fonts.gstatic.com
• Schriften als WOFF2 auf dem eigenen Hosting oder in Webflow hochgeladen
• font-display: swap gesetzt
• Nur die wirklich genutzten Schnitte eingebunden
• Alte <link>- und @import-Reste im Code gelöscht
• Themes, Plugins und Icon-Schriften geprüft
• Lizenz der Schrift geprüft
• Datenschutzerklärung angepasst, falls dort noch ein Absatz zu Google Fonts steht

Fazit

Google Fonts lokal zu hosten ist eine der einfachsten Maßnahmen, die du für die Datenschutz-Seite deiner Website tun kannst. Es kostet dich eine halbe Stunde, verbessert nebenbei die Ladezeit und nimmt dir ein Risiko ab, das du nicht eingehen musst. Wichtig ist nur, dass du am Ende wirklich nachprüfst. Wer nur die neue Schrift einbindet und den alten Link vergisst, hat nichts gewonnen.

Wenn du eine neue Website planst oder deine bestehende technisch prüfen lassen willst, helfe ich dir gerne. Als Webdesign-Freelancer baue ich Websites so, dass Schriften, Skripte und Einbindungen von Anfang an sauber gelöst sind. Eine Checkliste für den Relaunch findest du im Artikel zum Website-Relaunch 2026.

‍