Zum Inhalt springen

Google Fonts lokal einbinden: WordPress Anleitung (DSGVO-konform)

Google Fonts sind praktisch – aber wenn du sie direkt von Google-Servern lädst, überträgst du IP-Adressen deiner Besucher in die USA. Ohne Einwilligung ist das ein DSGVO-Verstoß. Die Lösung: Google Fonts lokal einbinden.

Warum Google Fonts extern problematisch sind

Wenn deine Website Google Fonts direkt von fonts.googleapis.com lädt, passiert Folgendes:

  1. Browser deines Besuchers fragt bei Google-Server an
  2. Google erhält dabei die IP-Adresse des Besuchers
  3. Google speichert diese Daten (Server in den USA)
  4. Das ist eine Datenübertragung in ein Drittland ohne Einwilligung

Das Ergebnis: Abmahnungen. 2022 rollte eine Abmahnwelle durch Deutschland. Forderungen: 100-200€ Schadensersatz plus Anwaltskosten.

Die Lösung: Fonts lokal hosten

Statt die Schriften von Google zu laden, hostest du sie auf deinem eigenen Server. Kein externer Aufruf, keine IP-Übertragung, kein Problem.

Vorteile:

  • DSGVO-konform ohne Einwilligung
  • Oft schnellere Ladezeiten (kein DNS-Lookup zu Google)
  • Funktioniert auch wenn Google geblockt wird
  • Unabhängig von Google-Verfügbarkeit

Schritt-für-Schritt: Google Fonts herunterladen

1. Schriften identifizieren

Finde heraus, welche Google Fonts deine Website nutzt:

Browser-Entwicklertools:

  1. Öffne deine Website
  2. F12 (Entwicklertools)
  3. Tab "Netzwerk"
  4. Filter: "font" oder suche nach "fonts.googleapis.com"
  5. Notiere die Font-Namen (z.B. "Open Sans", "Roboto")

Oder im Theme/Plugin:

  • Suche in Theme-Einstellungen nach "Typography" oder "Fonts"
  • Schaue in der style.css nach @import oder @font-face

2. Fonts herunterladen

Am einfachsten mit dem Google Webfonts Helper:

  1. Font suchen (z.B. "Open Sans")
  2. Gewünschte Stile auswählen (Regular, Bold, Italic etc.)
  3. Zeichensatz: "latin" reicht meist
  4. CSS-Präfix anpassen (z.B. ../fonts/)
  5. "Download files" klicken
  6. CSS kopieren

3. Fonts auf Server hochladen

  1. Erstelle einen Ordner /fonts/ in deinem Theme-Verzeichnis: /wp-content/themes/dein-theme/fonts/

  2. Lade die heruntergeladenen Font-Dateien hoch:

    • open-sans-v34-latin-regular.woff2
    • open-sans-v34-latin-700.woff2
    • etc.

4. CSS einbinden

Füge das CSS vom Google Webfonts Helper in deine style.css oder eine separate fonts.css ein:

/* open-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2');
}

/* open-sans-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v34-latin-700.woff2') format('woff2');
}

Wichtig:font-display: swap sorgt dafür, dass Text sofort angezeigt wird, auch wenn die Schrift noch lädt.

5. Externe Google Fonts Aufrufe entfernen

Jetzt musst du verhindern, dass WordPress weiterhin die externen Fonts lädt.

In der functions.php:

// Google Fonts von WordPress deaktivieren
add_action('wp_enqueue_scripts', function() {
    wp_dequeue_style('google-fonts');
    wp_deregister_style('google-fonts');
}, 100);

// Google Fonts aus Theme entfernen (Beispiel für viele Themes)
add_filter('style_loader_src', function($src) {
    if (strpos($src, 'fonts.googleapis.com') !== false) {
        return false;
    }
    return $src;
}, 10, 1);

Bei Elementor:

  1. Elementor → Einstellungen → Erweitert
  2. "Google Fonts laden" auf "Nein"

Bei vielen anderen Page Buildern: Suche in den Einstellungen nach "Google Fonts", "Typography" oder "External Fonts" und deaktiviere die Option.

Plugin-Lösung: OMGF

Einfacher geht's mit dem Plugin OMGF (Optimize My Google Fonts):

  1. Plugin installieren: OMGF
  2. Aktivieren
  3. Einstellungen → Optimize Google Fonts
  4. "Optimize" klicken
  5. Fertig

Das Plugin:

  • Findet automatisch alle Google Fonts auf deiner Website
  • Lädt sie herunter und hostet sie lokal
  • Entfernt die externen Aufrufe
  • Aktualisiert das CSS

Testen: Sind alle externen Aufrufe weg?

Nach der Umstellung unbedingt testen:

Browser-Entwicklertools:

  1. Cache leeren (Strg+Shift+R)
  2. Entwicklertools öffnen (F12)
  3. Tab "Netzwerk"
  4. Seite neu laden
  5. Suchen nach "fonts.googleapis.com" oder "fonts.gstatic.com"

Keine Treffer? Perfekt!

Online-Tools:

Häufige Probleme und Lösungen

Schrift sieht anders aus

Möglicherweise fehlt ein Font-Gewicht. Prüfe, welche Varianten (400, 500, 600, 700) dein Theme tatsächlich nutzt und lade alle herunter.

Theme lädt trotzdem externe Fonts

Manche Themes haben die Font-URLs hardcoded. Lösungen:

  • Child-Theme erstellen und überschreiben
  • Theme-Einstellungen prüfen
  • Plugin wie OMGF nutzt

Page Builder ignoriert die Änderungen

Elementor, Divi & Co. haben eigene Font-Einstellungen. Dort separat deaktivieren.

CDN cached alte Version

Wenn du ein CDN nutzt (Cloudflare etc.), Cache leeren.

Performance-Bonus

Lokale Fonts sind oft schneller als externe:

  • Kein zusätzlicher DNS-Lookup
  • Kein Verbindungsaufbau zu Google-Servern
  • Fonts können vom eigenen CDN profitieren
  • Weniger Render-Blocking

Tipp: Nur die wirklich benötigten Font-Varianten einbinden. Jede Variante ist eine zusätzliche Datei.

Was ist mit anderen externen Schriften?

Nicht nur Google Fonts sind betroffen. Auch:

  • Adobe Fonts (Typekit)
  • Font Awesome von CDN
  • Andere externe Font-Services

Das Prinzip ist dasselbe: Entweder lokal hosten oder per Cookie-Consent abfragen.

Fazit: Lokal ist besser

Google Fonts lokal einzubinden ist:

  • Rechtssicher – Keine DSGVO-Probleme, keine Abmahnungen
  • Schneller – Oft bessere Performance
  • Zuverlässiger – Unabhängig von Google

Der Aufwand ist überschaubar, der Nutzen groß. Wer es noch einfacher will: Mit unserem Rechtssicher-Paket übernehmen wir die Umstellung komplett – inklusive aller anderen DSGVO-relevanten Themen.

Checkliste: Google Fonts lokal einbinden

  • [ ] Verwendete Fonts identifizieren
  • [ ] Fonts mit Google Webfonts Helper herunterladen
  • [ ] Fonts auf Server hochladen
  • [ ] @font-face CSS einbinden
  • [ ] Externe Aufrufe entfernen/blocken
  • [ ] Cache leeren
  • [ ] Testen (keine googleapis.com Aufrufe mehr)
  • [ ] Regelmäßig prüfen (nach Updates!)

Du möchtest sichergehen, dass deine Website komplett DSGVO-konform ist? Unser Rechtssicher-Paket umfasst nicht nur Google Fonts, sondern auch Impressum, Datenschutzerklärung und Cookie-Banner.