WEBDESIGN
FREELANCER
+ ||| || ||| | || ||| || ||| +
1 MIN LESEZEIT Allgemeine Freelancer-Tipps

Google Fonts lokal laden: DSGVO-konform und abmahnsicher in 2026

Google Fonts lokal laden: DSGVO-konform und abmahnsicher in 2026

Google Fonts sind die beliebtesten Webfonts weltweit. Über 1.500 Schriftfamilien stehen kostenlos zur Verfügung. Das Problem: Wer sie direkt von Googles Servern lädt, überträgt dabei die IP-Adressen seiner Besucher an Google. Seit dem wegweisenden Urteil des LG München I im Januar 2022 ist klar, dass das ohne Einwilligung einen DSGVO-Verstoß darstellt. In diesem Guide zeige ich dir, wie du Google Fonts lokal lädst, welche rechtliche Situation 2026 gilt und wie du die Umstellung technisch sauber umsetzt.

Die rechtliche Situation 2026

Das Urteil des LG München I (Januar 2022)

Am 20. Januar 2022 entschied das Landgericht München I (Az. 3 O 17493/20), dass die dynamische Einbindung von Google Fonts einen Verstoß gegen die DSGVO darstellt. Der Grund: Beim Laden der Schriftarten von Googles Servern wird die IP-Adresse des Webseitenbesuchers an Google in die USA übermittelt. Das passiert ohne Einwilligung und ohne dass ein berechtigtes Interesse vorliegt. Die Klägerin erhielt 100 Euro Schadensersatz.

Was hat sich seitdem getan?

Nach dem Münchner Urteil folgte eine regelrechte Abmahnwelle. Einzelpersonen und Kanzleien durchsuchten das Internet systematisch nach Websites mit dynamisch eingebundenen Google Fonts und verschickten Abmahnungen mit Schadenersatzforderungen von meist 100 bis 170 Euro.

Mittlerweile hat sich die Rechtsprechung weiterentwickelt:

Fazit zur Rechtslage

Auch wenn die Abmahnwelle abgeebbt ist, solltest du Google Fonts nicht dynamisch einbinden. Es bleibt ein Rechtsverstoß, der bei einer Prüfung durch Datenschutzbehörden oder durch eine berechtigte Abmahnung Probleme verursachen kann. Die lokale Einbindung ist die saubere Lösung und bringt zusätzlich Performance-Vorteile.

Warum Google Fonts lokal laden besser ist

Die lokale Einbindung hat nicht nur rechtliche, sondern auch technische Vorteile:

Performance-Vorteile

Datenschutz-Vorteile

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

Schritt 1: Schriftarten herunterladen

Es gibt mehrere Wege, die Schriftdateien zu bekommen:

Option A: Google Webfonts Helper

Der Google Webfonts Helper ist das komfortabelste Tool. Du wählst die gewünschte Schriftart, die Schriftschnitte und das Format. Das Tool generiert automatisch den passenden CSS-Code und liefert ein Download-Paket.

Option B: Direkt von Google Fonts

Auf fonts.google.com kannst du Schriftarten auswählen und über den Download-Button als ZIP herunterladen. Du bekommst TTF-Dateien, die du anschließend in WOFF2 konvertieren solltest.

Option C: Fontsource (npm)

Für moderne Webprojekte mit Build-Tools ist Fontsource die eleganteste Lösung. Du installierst Fonts als npm-Pakete:

npm install @fontsource/inter

Und importierst sie dann in deinem CSS oder JavaScript:

@import '@fontsource/inter';

Schritt 2: Dateien in WOFF2 konvertieren

WOFF2 ist das optimale Format für Webfonts. Es bietet die beste Komprimierung und wird von allen modernen Browsern unterstützt. Falls du TTF- oder OTF-Dateien hast, konvertiere sie mit einem Tool wie:

WOFF (ohne 2) brauchst du 2026 nur noch, wenn du sehr alte Browser unterstützen musst. In der Praxis reicht WOFF2 aus.

Schritt 3: Dateien auf deinen Server hochladen

Erstelle einen Ordner für deine Fonts, zum Beispiel /fonts/ oder /assets/fonts/, und lade die WOFF2-Dateien dort hoch.

Schritt 4: CSS-Regeln erstellen

Definiere für jeden Schriftschnitt eine @font-face-Regel in deinem CSS:

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

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

Wichtige Details:

Schritt 5: Fonts vorladen (optional, aber empfohlen)

Für die wichtigsten Schriftschnitte (typischerweise Regular und Bold) kannst du ein Preload setzen:

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

Das crossorigin-Attribut ist bei Fonts immer erforderlich, auch wenn sie von derselben Domain geladen werden. Lade nicht mehr als zwei bis drei Fonts vor, sonst verliert der Preload-Hinweis seinen Wert.

Schritt 6: Alte Google-Fonts-Einbindung entfernen

Entferne alle Verweise auf Google Fonts aus deinem Code:

Google Fonts lokal laden in WordPress

Methode 1: Plugin verwenden

Das Plugin OMGF (Optimize My Google Fonts) automatisiert den gesamten Prozess:

  1. Installiere und aktiviere OMGF
  2. Das Plugin erkennt automatisch, welche Google Fonts dein Theme verwendet
  3. Es lädt die Fonts herunter, speichert sie lokal und ersetzt die externen Aufrufe
  4. Dequeue die originalen Google-Fonts-Stylesheets

Alternativ bietet auch Perfmatters eine Funktion zum lokalen Laden von Google Fonts.

Methode 2: Manuell über die functions.php

Wenn du es ohne Plugin machen möchtest, entferne die Google-Fonts-Einbindung in der functions.php deines Child-Themes:

function remove_google_fonts() {
    wp_deregister_style('theme-google-fonts');
    wp_dequeue_style('theme-google-fonts');
}
add_action('wp_enqueue_scripts', 'remove_google_fonts', 100);

Der Handle-Name (theme-google-fonts) variiert je nach Theme. Über die Entwicklertools deines Browsers findest du den korrekten Namen.

Anschließend fügst du die @font-face-Regeln in dein eigenes Stylesheet ein und lädst die WOFF2-Dateien in dein Theme-Verzeichnis hoch.

Methode 3: Theme-Einstellungen prüfen

Viele moderne WordPress-Themes wie Astra, GeneratePress oder Kadence bieten in ihren Einstellungen die Option, Google Fonts lokal zu laden. Prüfe unter Design > Customizer oder in den Theme-Settings, ob eine solche Option existiert.

Google Fonts in anderen Systemen lokal laden

Statische Websites und Frameworks

Bei statischen Websites (HTML, Astro, Next.js, Nuxt etc.) ist die lokale Einbindung besonders einfach. Du legst die WOFF2-Dateien in deinen Public-Ordner und definierst die @font-face-Regeln in deinem globalen CSS. Keine Plugins, keine Abhängigkeiten.

Shopify

In Shopify lädst du die Font-Dateien über Einstellungen > Dateien hoch. Die @font-face-Regeln fügst du in dein Theme-CSS ein, und die Google-Fonts-Einbindung entfernst du aus der theme.liquid.

TYPO3

In TYPO3 lädst du die Fonts in dein Fileadmin-Verzeichnis und definierst die @font-face-Regeln im TypoScript-Setup deines Templates.

Prüfen, ob Google Fonts noch extern geladen werden

Nach der Umstellung solltest du testen, ob wirklich keine externen Aufrufe mehr stattfinden:

Browser-Entwicklertools

  1. Öffne deine Website im Browser
  2. Öffne die Entwicklertools (F12)
  3. Gehe zum Tab “Netzwerk”
  4. Lade die Seite neu
  5. Filtere nach “font” oder suche nach “googleapis” und “gstatic”

Wenn keine Anfragen an diese Domains mehr zu sehen sind, war die Umstellung erfolgreich.

Online-Tools

Tipp: Alle Seiten prüfen

Prüfe nicht nur die Startseite. Manche Plugins oder Page-Builder laden Google Fonts nur auf bestimmten Seiten. Kontrolliere auch Unterseiten, Blogbeiträge und Landingpages.

Häufige Fehler vermeiden

Fazit

Google Fonts lokal zu laden ist 2026 keine optionale Maßnahme mehr, sondern Pflicht. Die rechtliche Lage ist eindeutig: Ohne Einwilligung dürfen keine IP-Adressen an Google übermittelt werden. Die gute Nachricht: Die Umstellung ist technisch einfach, bringt Performance-Vorteile und ist in weniger als einer Stunde erledigt.

Wenn du Hilfe bei der Umstellung brauchst oder deine Website auf weitere DSGVO-Verstöße prüfen lassen möchtest, findest du auf unserer Plattform erfahrene Webdesign-Freelancer, die dich unterstützen.

← ZURÜCK ZUM BLOG