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).
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:
.woff2-Dateien hoch3. 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.
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:
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.
Methode 1: Browser-Entwicklertools
googleapis.com oder gstatic.comMethode 2: Automatischer DSGVO-Scan Nutze den nevik.de DSGVO-Scanner:
✅ 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
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:
Hast du Fragen oder brauchst Hilfe? Schreib mir gerne – ich helfe bei der Umsetzung.