Google Fonts DSGVO-konform einbinden: Schritt-für-Schritt

Google Fonts sind auf Millionen von Websites im Einsatz. Was viele nicht wissen: Wenn du Google Fonts direkt von den Google-Servern lädst, überträgst du bei jedem Seitenaufruf die IP-Adresse deiner Besucher an Google — ohne deren Einwilligung. Seit einem wegweisenden Urteil des Landgerichts München aus dem Jahr 2022 steht fest: Das ist rechtswidrig, und es kann teuer werden.

In diesem Artikel erfährst du, warum das Laden von Google-Servern problematisch ist, wie du Google Fonts lokal einbindest und wie du prüfst, ob deine Website betroffen ist.

Das LG-München-Urteil: 100 Euro pro Besucher

Im Januar 2022 entschied das LG München (Az. 3 O 17493/20), dass das dynamische Einbinden von Google Fonts ohne Einwilligung gegen die DSGVO verstößt. Der Kläger erhielt 100 Euro Schadensersatz, weil seine IP-Adresse durch den Aufruf der Website an Google in die USA übertragen wurde.

Warum ist das Urteil so wichtig?

Es hat erstmals klargestellt, dass die IP-Adresse ein personenbezogenes Datum ist (was rechtlich schon vorher galt, aber nun für Google Fonts konkret bestätigt wurde)
Das Gericht sah keinen berechtigten Grund für die Datenübertragung, da Google Fonts auch lokal eingebunden werden können
Der Schadensersatz von 100 Euro mag gering klingen — aber bei Maßenabmahnungen multipliziert sich das schnell

Die Folge: In den Monaten nach dem Urteil gab es eine Welle von Abmahnungen gegen Website-Betreiber, die Google Fonts noch von Google-Servern luden. Anwaltskanzleien verschickten tausende Abmahnschreiben, teilweise mit Forderungen von 100 bis 170 Euro pro Besucher.

Zwar wurden einige dieser Maßenabmahnungen als rechtsmissbräuchlich eingestuft. Aber das grundsätzliche Problem bleibt bestehen: Google Fonts von externen Servern zu laden, ist ohne Einwilligung nicht DSGVO-konform.

Warum sind Google Fonts von Google-Servern problematisch?

Wenn du Google Fonts über den Standard-Einbettungscode verwendest, passiert bei jedem Seitenaufruf Folgendes:

Der Browser des Besuchers sendet eine Anfrage an fonts.googleapis.com
Google erhält dabei die IP-Adresse des Besuchers
Google erhält den Referrer (die URL deiner Website)
Google erhält den User-Agent (Browser, Betriebssystem)
Die Daten werden auf Google-Servern verarbeitet, die sich überwiegend in den USA befinden

Das geschieht automatisch beim Laden der Seite, noch bevor der Nutzer irgendetwas getan hat — und ohne seine Einwilligung.

Laut DSGVO braucht jede Verarbeitung personenbezogener Daten eine Rechtsgrundlage. Für Google Fonts gibt es keine:

Einwilligung (Art. 6 Abs. 1 lit. a): Liegt nicht vor, da die Fonts vor jeder Interaktion geladen werden
Berechtigtes Interesse (Art. 6 Abs. 1 lit. f): Nicht gegeben, da es eine einfache Alternative gibt (lokales Hosting)
Vertragserfüllung (Art. 6 Abs. 1 lit. b): Google Fonts sind nicht für die Nutzung der Website erforderlich

Schritt-für-Schritt: Google Fonts lokal einbinden

Schritt 1: Herausfinden, welche Fonts du verwendest

Schau in den Quellcode deiner Website. Suche nach Verweisen auf fonts.googleapis.com oder fonts.gstatic.com. Typisch sehen diese so aus:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

In diesem Beispiel wird die Schriftart “Inter” in den Schnitten 400, 500, 600 und 700 verwendet.

Schritt 2: Fonts herunterladen

Es gibt mehrere Wege, die Font-Dateien herunterzuladen:

Option A: Google Webfonts Helper (empfohlen)

Besuche gwfh.mranftl.com/fonts, suche deine Schriftart, wähle die benötigten Schnitte und lade das Paket herunter. Das Tool generiert dir auch gleich das passende CSS.

Option B: Direkt von Google Fonts

Auf fonts.google.com kannst du Schriftarten auswählen und als ZIP herunterladen. Du erhältst dann .ttf-Dateien, die du mit einem Online-Converter in .woff2 konvertieren solltest (bessere Kompression).

Option C: Über npm

Für viele beliebte Fonts gibt es npm-Pakete, z.B. @fontsource/inter. Diese enthalten die Font-Dateien und das CSS.

Schritt 3: Fonts in dein Projekt einbinden

Lege die heruntergeladenen Font-Dateien in deinem Projekt ab, z.B. unter /fonts/:

/fonts/
  inter-v13-latin-regular.woff2
  inter-v13-latin-500.woff2
  inter-v13-latin-600.woff2
  inter-v13-latin-700.woff2

Schritt 4: CSS-Deklarationen erstellen

Ersetze den Google-Fonts-Link durch lokale @font-face-Deklarationen:

/* Vorher: */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); */

/* Nachher: */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-v13-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/inter-v13-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-v13-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/inter-v13-latin-700.woff2') format('woff2');
}

Schritt 5: Google-Fonts-Verweise entfernen

Entferne alle Verweise auf Google-Server aus deinem HTML:

<!-- Diese Zeilen löschen: -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter..." rel="stylesheet">

Schritt 6: Testen

Lade deine Website und überprüfe:

Die Schriftarten werden korrekt angezeigt
In den Entwicklertools (Netzwerk-Tab) gibt es keine Anfragen mehr an fonts.googleapis.com oder fonts.gstatic.com
Die Schrift lädt schnell (durch font-display: swap siehst du zunächst eine Fallback-Schrift)

Bonus: Performance-Vorteil

Lokales Font-Hosting ist nicht nur DSGVO-konform, sondern auch schneller:

Keine zusätzlichen DNS-Lookups zu Google-Servern
Keine Render-Blocking-Requests zu externen Domains
HTTP/2-Multiplexing von deinem eigenen Server
Besseres Caching unter deiner Kontrolle
Bessere Core Web Vitals, insbesondere LCP und CLS

In Tests zeigt sich: Lokal gehostete Fonts laden im Durchschnitt 100—300ms schneller als von Google-Servern.

CMS-spezifische Hinweise

WordPress

In WordPress laden viele Themes Google Fonts automatisch. Nutze ein Plugin wie “OMGF (Optimize My Google Fonts)” oder “Asset CleanUp”, um die externen Font-Anfragen zu entfernen und die Fonts lokal bereitzustellen.

Shopify

Shopify-Themes verwenden oft Google Fonts. In der theme.liquid kannst du die Google-Fonts-Links entfernen und stattdessen lokale Font-Dateien in den assets-Ordner hochladen.

Andere CMS

Prüfe die Theme-Einstellungen, Header-Templates und verwendeten Plugins. Häufig laden Plugins wie Slider, Formular-Builder oder Social-Media-Widgets eigene Google-Fonts-Referenzen.

Prüfe deine Website mit Compliso

Du bist dir nicht sicher, ob deine Website noch Google Fonts von externen Servern lädt? Der Compliso Scanner erkennt automatisch:

Externe Anfragen an fonts.googleapis.com und fonts.gstatic.com
Andere externe Ressourcen, die IP-Adressen übertragen
Eingebettete Dienste ohne Einwilligung (YouTube, Maps, etc.)

Scanne deine Website jetzt kostenlos und finde in Sekunden heraus, ob externe Google Fonts auf deiner Seite geladen werden.