Google Fonts DSGVO-konform lokal einbinden

Google Fonts binden Sie DSGVO-konform ein, indem Sie die Schriftdateien selbst hosten: herunterladen, im Format WOFF2 auf den eigenen Server legen, per @font-face im CSS einbinden und alle Verweise auf die Google-Server entfernen. Danach überträgt der Browser beim Seitenaufruf keine IP-Adresse mehr an Google, nur weil eine Schrift angezeigt wird. Die folgende Anleitung zeigt die Schritte und die häufigsten versteckten Stolperstellen.

Dieser Artikel ist eine technische Anleitung und keine Rechtsberatung. Wie Sie überhaupt passende Schriften auswählen, steht im Artikel Schriftarten kombinieren.

Warum die Einbindung über Google problematisch ist

Wird eine Schrift über die übliche Einbettung von Google Fonts geladen, ruft der Browser beim Seitenbesuch eine Datei von den Google-Servern ab. Dabei wird zwangsläufig die IP-Adresse der Besucherin oder des Besuchers übertragen. Nach der Datenschutz-Grundverordnung ist eine IP-Adresse in der Regel ein personenbezogenes Datum.

Das Landgericht München I hat Anfang 2022 in einem viel beachteten Urteil entschieden, dass diese Übertragung ohne Einwilligung im verhandelten Fall rechtswidrig war, und dem Kläger einen Schadensersatz zugesprochen. Das Gericht wies darauf hin, dass sich die Schriften auch ohne Verbindung zu Google nutzen lassen. In der Folge erhielten viele Website-Betreiber Abmahnschreiben zu diesem Thema. Unabhängig von der rechtlichen Bewertung im Einzelfall gilt: Die lokale Einbindung ist technisch einfach und beseitigt das Problem an der Wurzel.

Schritt 1: Herausfinden, was geladen wird

Bevor Sie etwas ändern, verschaffen Sie sich einen Überblick:

1. Website im Browser öffnen, Entwicklerwerkzeuge aufrufen und in den Netzwerk-Tab wechseln.
2. Den Cache deaktivieren und die Seite neu laden.
3. Nach fonts.googleapis.com und fonts.gstatic.com filtern.
4. Notieren, welche Schriftfamilien, Schnitte und Stile angefordert werden, etwa “Inter 400, 600, 700”.

Die Datei von fonts.googleapis.com ist ein Stylesheet. Darin steht, welche Schriftdateien von fonts.gstatic.com geladen werden. Diese Liste brauchen Sie für die nächsten Schritte.

Schritt 2: Schriftdateien besorgen

Für das Herunterladen gibt es mehrere Wege:

Laden Sie nur, was Sie wirklich brauchen. Für deutschsprachige Websites genügt meist der Zeichensatz “latin”, der die Umlaute und das ß enthält. “latin-ext” brauchen Sie erst für weitere europäische Sprachen.

Schritt 3: Dateien auf den Server legen

Legen Sie die WOFF2-Dateien in einen eigenen Ordner, zum Beispiel /fonts/, und vergeben Sie sprechende Dateinamen wie inter-latin-400.woff2. Legen Sie die Lizenzdatei dazu. WOFF2 wird von allen aktuellen Browsern unterstützt und ist stark komprimiert. Ältere Formate wie TTF, EOT oder WOFF sind für aktuelle Websites nicht mehr nötig.

Schritt 4: Schriften per @font-face einbinden

Im CSS beschreibt je ein @font-face-Block einen Schnitt:

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

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

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

Bei einem variablen Font genügt oft ein einziger Block mit einem Gewichtsbereich, etwa font-weight: 100 900;. Die Angabe font-display: swap sorgt dafür, dass der Text sofort in einer Systemschrift erscheint und ausgetauscht wird, sobald die Webfont geladen ist. Der Text bleibt so nie unsichtbar.

Schritt 5: Alte Verweise entfernen

Jetzt löschen Sie die bisherige Einbindung: den <link> auf fonts.googleapis.com im HTML-Kopf, eventuelle @import-Zeilen im CSS und preconnect-Hinweise auf die Google-Server. Bei Content-Management-Systemen steckt die Einbindung oft nicht im eigenen Code:

• Themes laden Schriften häufig über eigene Einstellungen. Viele bieten eine Option, Google Fonts zu deaktivieren oder lokal zu laden.
• Page-Builder und Plugins binden teilweise eigene Schriften ein, auch wenn das Theme schon lokal lädt.
• Eingebettete Dienste wie Kartenausschnitte, Videoplayer oder Formularschutz-Widgets können ihrerseits Schriften von Google nachladen. Diese lassen sich oft nur über eine Zwei-Klick-Lösung oder einen Verzicht auf die Einbettung vermeiden.

Schritt 6: Ergebnis prüfen

Wiederholen Sie die Kontrolle aus Schritt 1, diesmal auf mehreren Seitentypen: Startseite, Artikel, Kontaktseite, Seiten mit Karte oder Video. Kontrollieren Sie außerdem, ob die Schrift wirklich geladen wird und nicht still durch eine Systemschrift ersetzt ist. Im Netzwerk-Tab sollten die WOFF2-Dateien von Ihrer eigenen Domain erscheinen.

• keine Anfrage an fonts.googleapis.com
• keine Anfrage an fonts.gstatic.com
• alle benötigten Schnitte werden von der eigenen Domain geladen
• Fett und Kursiv sind echte Schnitte, keine künstlich erzeugten
• Umlaute, ß und Anführungszeichen werden korrekt dargestellt
• Datenschutzerklärung an die neue Einbindung angepasst

Ladezeit optimieren

Selbst gehostete Schriften bieten die Chance, die Ladezeit spürbar zu verbessern:

• Weniger Schnitte: Jeder Schnitt ist eine Datei. Oft reichen zwei Gewichte oder ein variabler Font.
• Preload für die wichtigste Datei: Mit <link rel="preload" href="/fonts/inter-latin-400.woff2" as="font" type="font/woff2" crossorigin> startet der Browser den Download früher. Sinnvoll ist das nur für eine, höchstens zwei Dateien, die im sichtbaren Bereich gebraucht werden.
• Passender Fallback: Eine Systemschrift mit ähnlichen Proportionen verringert den Sprung im Layout, wenn die Webfont eingetauscht wird. Mit den Deskriptoren size-adjust und ascent-override lässt sich der Fallback noch genauer angleichen.
• Lange Cache-Dauer: Schriftdateien ändern sich selten und können lange im Browser-Cache bleiben.

Wie Schriften und Bilder gemeinsam die Ladezeit beeinflussen und welche Messwerte dabei zählen, erklärt der Artikel Wie Bilder und Schriften die Ladezeit beeinflussen.

Lokale Schriften in WordPress und modernen Frameworks

Je nach System unterscheidet sich der einfachste Weg:

• WordPress: Viele aktuelle Themes und der Website-Editor erlauben es, Schriften hochzuladen oder automatisch lokal zu speichern. Alternativ übernehmen Plugins das Herunterladen und Umschreiben der Einbindung. Prüfen Sie danach trotzdem im Netzwerk-Tab, ob Page-Builder oder andere Plugins weiterhin eigene Aufrufe an Google senden.
• Statische Websites und Frameworks wie Astro, Next.js oder Vite: Schriften lassen sich als Paket installieren und werden beim Build in das eigene Projekt kopiert. Einige Frameworks bieten auch eine eingebaute Schriftverwaltung, die Dateien beim Build lokal ablegt.
• Website-Baukästen: Hier hängt es vom Anbieter ab. Manche laden Schriften grundsätzlich über eigene Server, andere über Google. Ein Blick in die Hilfeseiten und in den Netzwerk-Tab schafft Klarheit.

Häufige Fehler beim Umstellen

• Nur das Theme umgestellt: Ein Plugin oder ein eingebetteter Dienst lädt weiterhin Schriften von Google.
• Falsche Pfade im CSS: Der Browser findet die Dateien nicht und zeigt still eine Systemschrift. Der Fehler fällt oft erst auf, wenn jemand genau hinsieht.
• Zu viele Dateien: Aus Vorsicht werden alle Gewichte und Zeichensätze heruntergeladen. Das verlängert die Ladezeit, ohne dass es jemand merkt.
• Fehlende Kursivschnitte: Wird der Kursivschnitt nicht eingebunden, erzeugt der Browser eine künstlich geneigte Variante, die deutlich schlechter aussieht.
• CDN statt Google: Wer die Schriften von einem anderen fremden Server lädt, verlagert das Problem nur. Gemeint ist der eigene Server oder ein Dienst, mit dem eine Vereinbarung zur Auftragsverarbeitung besteht.
• Cache nicht geleert: Bei der Kontrolle stammen die Schriften noch aus dem Browser-Cache, und alte Aufrufe bleiben unbemerkt.

Und andere Schriftdienste?

Das Prinzip gilt nicht nur für Google. Auch andere externe Schriftdienste übertragen beim Laden Daten an ihre Server. Bei kommerziellen Schriften entscheidet die Lizenz, ob Selbsthosten erlaubt ist. Manche Weblizenzen sehen ausdrücklich eine Auslieferung über den Dienst des Anbieters vor. Prüfen Sie das vor dem Umzug.

Die Grundlagen zu Schriftgrößen, Zeilenabstand und Schriftklassen finden Sie im Ratgeber Typografie im Web.