Installiere eines dieser kostenlosen Plugins:

2. Plugin konfigurieren: Bei OMGF:

3. Cache leeren: Füge in deine style.css oder custom.css ein:

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

body {
  font-family: 'Roboto', sans-serif;
}

4. Alte Google-Font-Einbindung entfernen:

und lösche sie (oder kommentiere sie aus).

Methode 2: Google Fonts lokal einbinden in Shopify

Shopify-Themes nutzen oft Google Fonts über die Theme-Einstellungen. So gehst du vor:

1. Fonts herunterladen: Wie oben über google-webfonts-helper – lade die .woff2-Dateien herunter.

2. Fonts in Shopify hochladen:

3. CSS anpassen: Öffne die Datei theme.scss.liquid oder base.css und füge hinzu:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('{{ "roboto-v30-latin-regular.woff2" | asset_url }}') format('woff2');
}

body {
  font-family: 'Roboto', sans-serif;
}

4. Google-Font-Link entfernen:

und lösche die Zeile.

5. Testen: Öffne deine Shopify-Seite, öffne die Browser-Konsole (F12) und prüfe, ob noch Anfragen an Google gehen.

Methode 3: Google Fonts lokal einbinden in HTML/CSS

Wenn du eine statische Website oder ein Custom-CMS nutzt:

1. Fonts herunterladen: Nutze google-webfonts-helper und lade die .woff2-Dateien herunter.

2. Ordnerstruktur erstellen: Lege auf deinem Server einen Ordner /fonts/ an und lade die Dateien hoch.

3. CSS-Datei anpassen: Füge in deine style.css ein:

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

body {
  font-family: 'Open Sans', Arial, sans-serif;
}

4. Alte Google-Font-Links entfernen:

Häufige Fehler beim lokalen Einbinden

1. Falsche Pfadangaben: Achte darauf, dass der Pfad in url() korrekt ist. Nutze absolute Pfade (/fonts/...) statt relative (../fonts/...), um Probleme zu vermeiden.

2. Nicht alle Schriftschnitte eingebunden: Wenn deine Website font-weight: 700 nutzt, du aber nur 400 lokal hostest, lädt der Browser die fehlende Variante nach – oft wieder von Google. Binde alle genutzten Schnitte ein.

3. Cache nicht geleert: Browser und CDN cachen alte Ressourcen. Leere den Cache (Strg+Shift+R) und teste im Inkognito-Modus.

4. Theme-Update überschreibt Änderungen: Nutze Child-Themes (WordPress) oder versioniere deine Änderungen, damit Updates sie nicht löschen.

So prüfst du, ob es funktioniert hat

Methode 1: Browser-Entwicklertools

Methode 2: Automatischer DSGVO-Scan Nutze den nevik.de DSGVO-Scanner:

Zusammenfassung: Checkliste

✅ Google Fonts heruntergeladen (am besten als .woff2)
✅ Dateien auf eigenem Server hochgeladen
✅ CSS angepasst (@font-face mit lokalem Pfad)
✅ Alte Google-Font-Links entfernt
✅ Cache geleert (Browser + WordPress/Shopify)
✅ Mit nevik.de Scanner geprüft

Fazit

Google Fonts lokal einzubinden ist keine Raketenwissenschaft – aber ein wichtiger Schritt für DSGVO-Konformität. Die Investition von 20-30 Minuten kann dich vor teuren Abmahnungen schützen.

Nächste Schritte:

  1. Prüfe mit dem nevik.de DSGVO-Scanner, ob deine Website betroffen ist
  2. Binde die Fonts lokal ein (nutze die Anleitung oben)
  3. Teste erneut und dokumentiere die Änderung für dein Verarbeitungsverzeichnis

Hast du Fragen oder brauchst Hilfe? Schreib mir gerne – ich helfe bei der Umsetzung.