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

Der Kern ist einfach: Statt die Schriften bei jedem Seitenaufruf von Google zu laden, hostest du sie selbst. Diese Anleitung zeigt dir den vollständigen Weg vom Download bis zur Kontrolle — system-unabhängig, mit Beispiel-Code, in rund 45 Minuten erledigt.

  • Funktioniert für jede Website
  • Mit Beispiel-Code
  • Kein Google-Aufruf mehr nach der Umstellung

Wenn du erst verstehen willst, warum die direkte Einbindung ein Problem ist, lies zuerst die Übersicht Google Fonts und DSGVO. Diese Seite ist die praktische Anleitung — sie setzt voraus, dass du dein Setup ändern willst.

Das Prinzip in einem Satz

Du lädst die Schriftdateien einmal von Google herunter, legst sie auf deinen eigenen Server und bindest sie per @font-face ein. Danach baut der Browser deiner Besucher keine Verbindung mehr zu Google auf — keine IP-Übertragung, kein Drittland-Transfer. Das ist die einzige Methode, die das Problem vollständig beseitigt; ein Cookie-Banner oder ein Consent-Tool kann die Übertragung nicht legalisieren, weil sie vor jeder Einwilligung passiert.

Schritt 1 — Genutzte Schriften identifizieren

Zuerst musst du wissen, welche Schriften und welche Schnitte (Regular, Bold, Italic …) deine Seite tatsächlich verwendet. Öffne die Entwicklertools (F12), gehe auf den Reiter Netzwerk, lade die Seite neu und filtere nach fonts.googleapis. Jede Anfrage zeigt dir eine genutzte Schrift. Notiere Name und Schnitte — du willst nur das herunterladen, was du wirklich brauchst, denn jeder ungenutzte Schnitt kostet unnötig Ladezeit.

Schritt 2 — Schriftdateien herunterladen

Am bequemsten geht das über den Google Webfonts Helper (gwfh.mranftl.com/fonts) — ein kostenloses Open-Source-Tool, das die Schriften direkt im modernen woff2-Format ausgibt und das passende CSS gleich mitgeneriert. Du wählst die Schrift, markierst die benötigten Schnitte und lädst das Paket als ZIP herunter. Alternativ kannst du die Schriften über fonts.google.com herunterladen — dann erhältst du allerdings ttf-Dateien, die du noch in woff2 konvertieren solltest (z. B. mit transfonter.org), weil woff2 deutlich kleiner ist.

Schritt 3 — Dateien auf den eigenen Server legen

Lege auf deinem Server einen Ordner an, etwa /fonts/, und lade die woff2-Dateien dort hoch. Die genaue Stelle ist egal, solange du den Pfad im CSS korrekt referenzierst. Eine übersichtliche Struktur sieht so aus:

/fonts/
  roboto-v30-latin-regular.woff2
  roboto-v30-latin-700.woff2
  roboto-v30-latin-italic.woff2

Schritt 4 — Per @font-face einbinden

Jetzt deklarierst du die Schriften im eigenen CSS. Der Google Webfonts Helper generiert diesen Block automatisch — du musst ihn nur in deine CSS-Datei kopieren. Ein Beispiel für Roboto Regular:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto-v30-latin-regular.woff2') format('woff2');
}

Wiederhole den Block für jeden Schnitt mit dem passenden font-weight und font-style. Die Eigenschaft font-display: swap; sorgt dafür, dass der Text sofort mit einer System-Schrift sichtbar ist und nicht „unsichtbar" bleibt, während die Schrift lädt — gut für die Ladewahrnehmung und für Core Web Vitals. Im restlichen CSS nutzt du die Schrift wie gewohnt, etwa body { font-family: 'Roboto', sans-serif; }.

Schritt 5 — Externe Verweise entfernen und prüfen

Jetzt der entscheidende Schritt, der oft vergessen wird: Entferne alle alten Verweise auf Google. Suche im <head> nach Zeilen wie:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

… und lösche sie. Prüfe auch dein CSS auf @import url('https://fonts.googleapis.com/...')-Zeilen — auch die müssen weg. Ein einziger übersehener Verweis genügt, damit der Verstoß bestehen bleibt.

Zum Schluss kontrollierst du das Ergebnis: Lade die Seite neu, öffne den Netzwerk-Tab und filtere erneut nach fonts.googleapis und gstatic. Es darf keine einzige Anfrage mehr erscheinen. Erst dann ist die Umstellung wirklich vollständig.

Umstellung fertig? Lass es bestätigen

Statt selbst im Netzwerk-Tab zu suchen, kannst du deine Seite mit dem DSGVO Risk Checker scannen. Er meldet dir verbindlich, ob noch externe Font-Aufrufe übrig sind — und prüft gleich 60+ weitere DSGVO-Punkte mit.

Häufige Stolperfallen

Ein paar Dinge, an denen die Umstellung in der Praxis scheitert — und wie du sie vermeidest:

  • Vergessene preconnect-Tags. Viele lassen die <link rel="preconnect">-Zeilen stehen, weil sie „nur" eine Verbindung vorbereiten. Auch sie bauen eine Verbindung zu Google auf und sollten weg.
  • Schrift kommt aus einem Plugin oder Theme. Bei Baukästen und CMS lädt oft das System selbst die Fonts — nicht dein eigenes CSS. Dann reicht es nicht, im eigenen Code zu suchen.
  • Icon-Fonts übersehen. Material Icons werden ebenfalls über fonts.googleapis.com geladen und müssen genauso lokal eingebunden werden.
  • Caching. Nach der Änderung kann ein Cache (Browser, CDN, Plugin) alte Verweise weiter ausliefern. Cache leeren und im Inkognito-Modus prüfen.
  • Falsche Pfade. Zeigt der src-Pfad ins Leere, fällt der Browser auf eine Ersatzschrift zurück — die Seite „funktioniert", sieht aber anders aus. Im Netzwerk-Tab auf 404-Fehler bei den woff2-Dateien achten.

Bringt das lokale Hosten Nachteile?

In der Praxis fast keine — im Gegenteil. Du sparst die DNS-Auflösung und den Verbindungsaufbau zu zwei zusätzlichen Google-Domains, was die Seite oft sogar schneller macht. Der einzige „Nachteil": Du bekommst Schrift-Updates von Google nicht mehr automatisch. Da Schriftarten praktisch nie aktualisiert werden, ist das in der Realität irrelevant. Die Lizenz spricht ebenfalls nicht dagegen: Google Fonts stehen unter offenen Lizenzen (meist SIL Open Font License), die das Selbst-Hosten ausdrücklich erlauben.

Sicher sein, dass kein Aufruf mehr durchgeht

Kostenloser Scan, kein Konto nötig, sofortiges Ergebnis.

Häufige Fragen

Brauche ich Programmierkenntnisse dafür?

Grundkenntnisse in HTML und CSS reichen. Wer auf seine CSS-Datei und den Server-Ordner zugreifen kann, schafft die Umstellung in unter einer Stunde. Bei Baukasten-Systemen oder wenn ein Theme die Fonts lädt, ist es etwas kniffliger — dann hilft oft ein Plugin (siehe die WordPress-Anleitung) oder ein Webentwickler.

Welches Schriftformat soll ich nehmen?

woff2. Es ist das modernste, am stärksten komprimierte Format und wird von allen aktuellen Browsern unterstützt. Ältere Formate wie ttf oder eot sind heute nicht mehr nötig. Der Google Webfonts Helper liefert woff2 standardmäßig.

Darf ich Google Fonts überhaupt selbst hosten — lizenzrechtlich?

Ja. Google Fonts stehen unter offenen Lizenzen, in der Regel der SIL Open Font License. Diese erlaubt ausdrücklich das Herunterladen, Weitergeben und Selbst-Hosten der Schriften. Du verstößt mit dem lokalen Hosten gegen keine Lizenzbedingung.

Wie prüfe ich, ob die Umstellung wirklich vollständig war?

Im Netzwerk-Tab der Entwicklertools nach „fonts.googleapis" und „gstatic" filtern — es darf keine Anfrage mehr erscheinen. Schneller geht es mit dem DSGVO Risk Checker: URL eingeben, und du bekommst verbindlich gemeldet, ob noch externe Font-Aufrufe übrig sind.