- Schritt 1: Welche Google Fonts werden auf deiner WordPress Seite geladen?
- Schritt 2: Google Fonts herunterladen
- Schritt 3: Bereitstellen der Google Fonts auf deinem Webserver
- Schritt 4: CSS einbinden, um die Google Fonts lokal zu verwenden
- Schritt 5: Deaktivieren des Ladens der Google Fonts via CDN
- Fazit
- Hilfreiche Links
Damit deine WordPress Webseite DSGVO-konform bleibt, solltest du deine Google Schriftarten lokal einbinden. Das Ganze ist auch gar nicht schwer und lässt sich mit wenigen CSS Angaben und dem WordPress Plugin Asset CleanUp reibungslose umsetzen.
Spätestens mit dem Urteil des LG München vom 20.01.2022 solltest du hier aktiv werden und die Schriftarten lokal einbinden.
Schritt 1: Welche Google Fonts werden auf deiner WordPress Seite geladen? #
Als erstes, musst du prüfen, welche Schriftarten auf deiner Webseite verwendet werden. Hierfür kannst du die Entwicklertools von Google Chrome verwenden (auch Safari, Opera und Firefox verfügen über eine Entwicklertools).
Öffne nun zunächst deine Webseite, auf der du prüfen möchtest, ob Google Schriftarten eingebunden wurden.
Anschließend wechselst du zu den Entwicklertools (F12 auf der Tastatur, alternativ kannst du die 3 Punkte in der rechten oberen Ecke deines Browsers anklicken und im Menü > Weitere Tools > Entwicklertools die Konsole öffnen).
Du solltest jetzt ein neues Fenster mit den Entwicklertools (DevTools) sehen können.
In dem neuen Fenster wählst du nun den Reiter Network (Netzwerk) > Fonts aus, um alle von der Webseite geladenen Schriftarten anzuzeigen. Anschließend lädst du die Seite neu (F5).
Jetzt erhältst du eine Abbildung aller Schriftarten, die geladen wurden. Über den Filter kannst du das ganze eingrenzen, in dem du die Ergebnisse nach dem Schlüsselwort “gstatic” durchsuchst (Google Schriftarten werden in der Regel über fonts.gstatic.com eingebunden).
Auf unserer Beispielseite wird lediglich die Schriftart “karla” von fonts.gstatic.com eingebunden. Notiere dir am besten alle Schriftarten, die dir angezeigt werden. Im nächsten Schritt dreht sich alles darum, die Schriftarten herauszusuchen und herunterzuladen.
Schritt 2: Google Fonts herunterladen #
Nachdem du nun im ersten Schritt herausgefunden hast, welche Schriftarten verwendet werden, musst du diese natürlich erstmal herunterladen.
Schriftarten werden in verschiedenen Formaten TTF, WOFF, WOFF2, EOT und SVG angeboten. Das liegt daran, dass nicht alle Geräte alle Formate unterstützen. Um für deine WordPress Webseite die beste Kompatibilität zu gewährleisten, solltest du daher immer darauf achten, möglichst alle Formate einzufügen.
Google selbst bietet hierbei nur das Format TTF als Download an. Abhilfe schafft daher Webseite Google Webfonts Helper.
Dort findest du alle Google Fonts zum Download in den verschiedenen Formaten. Durch die Suche im linken oberen Bereich hast du die Möglichkeit die Liste zu filtern. Gib dort nun den Namen der Schriftarten an, die du in Schritt 1 gefunden hast.
Anschließend wählst du die passende Schriftart mit einem Klick aus.
Du siehst nun die Detailansicht auf der Google Webfonts Helper Seite mit weiteren Optionen. Hier kannst du neben dem Charset und den gewünschten Styles wählen. Außerdem generiert dir die Seite auch die CSS Styles und ermöglicht dir das herunterladen der Schriftarten.
Um fortzufahren, wählst du jetzt die gewünschten Styles aus und lade die Dateien anschließend durch den Klick auf die Schaltfläche am Ende der Seite herunter.
Das CSS in Schritt 3 benötigen wir später, sobald wir die Daten auf deiner Webseite einpflegen. Es ist hilfreich, die Seite offenzulassen, damit du später auch den Ordner einfach anpassen kannst (Feld: Customize folder prefix) und das CSS automatisch neu generiert wird.
Schritt 3: Bereitstellen der Google Fonts auf deinem Webserver #
Als Nächstes musst die heruntergeladenen Schriftarten auf deinen Webserver hochladen. Hierfür verwendest du idealerweise ein FTP Programm (z.B. FileZilla, WS FTP oder vgl.).
Verbinde dich daher mit deinem Server und wechsel in das Theme Verzeichnis deiner WordPress Webseite. Hier erstellst du einen neuen Ordner, den du “fonts” nennst.
Anschließend wechselst du in den Ordner und erstellst zur Übersicht für jede deiner Schriftarten einen eigenen Ordner. Dort kopierst du anschließend die Schriftarten, die du zuvor heruntergeladen hast, hinein.
Jetzt kopierst du dir noch den Pfad zu der Schriftart. In unserem Beispiel lautet dieser folgendermaßen:
/wp-content/themes/storebiz/fonts/karla/Diesen kannst du jetzt beim Google Webfonts Helper im Feld “Customize folder prefix” hinterlegen, um das CSS zu generieren. (Hinweis: Achte unbedingt darauf, den “/” am Ende des Pfades mit anzugeben).
Schritt 4: CSS einbinden, um die Google Fonts lokal zu verwenden #
Damit die Google Schriftarten, die wir zuvor über FTP hochgeladen haben, geladen werden, musst du deiner WordPress Webseite via CSS mitteilen, wo diese gefunden werden. Dies erledigst du zum Beispiel über die style.css deines Themes. Alternativ kannst du es auch im WordPress Customizer einpflegen.
Öffne hierzu die style.css, die sich im Hauptverzeichnis deines Themes (Child-Themes) befindet. Kopiere den CSS Code an das Ende der Datei. Speichere die Datei und lade sie erneut auf deinen Server.
Das war es auch schon – jetzt müssen wir nur noch die Aufrufe zu den Google Fonts auf dem CDN deaktivieren.
Schritt 5: Deaktivieren des Ladens der Google Fonts via CDN #
Google Fonts können über verschiedene Wege in deine Seite eingebunden werden. Die beste Erfahrung zum Deaktivieren der Schriftarten haben wir bisher mit dem WordPress-Plugin Asset CleanUp gesammelt. Das Plugin hat bisher alle Links bei unseren Testseiten erkannt und entfernt.
Die kostenlose Version des Asset CleanUp Plugins kann direkt über den WordPress-Plugin Manager heruntergeladen und installiert werden.
Nach der Aktivierung wechselst du zu Asset CleanUp > Settings > Google Fonts > Remove All und schiebst den Regler auf die rechte Seite. Dadurch wird der HTML Code nun nach gängigen Formaten des Google Fonts Links durchsucht. Treffer werden automatisch entfernt.
Anschließend speicherst du die Einstellungen und leerst (falls vorhanden) den Cache deiner WordPress Webseite.
Fazit #
Das war es auch schon. Du siehst, das entfernen von Google Links ist in wenigen Schritten ohne Programmierkenntnisse möglich. Trotz allem solltest du deine Seite anschließend nochmal auf eventuelle Vorkommen von Google Schriftarten prüfen. Das WordPress-Plugin Asset CleanUp findet zwar viele der Links, dennoch kann es auch hier und da passieren, dass einzelne Links durch das Raster fallen. Dann hilft meist nur die individuelle Korrektur.
Gerne kannst du uns kontaktieren, falls du Hilfe beim Entfernen der Links benötigst. Dann übernehmen wir das für dich zum Festpreis. Vereinbare einfach ein Erstgespräch.
Sehr guter Bericht!
Alle Schritte waren einfach nachzuvollziehen.
Dankeschön :)
Hallo Marc,
leider hat es bei mir nicht funktioniert. Vielleicht ist das Theme das Problem, ich benutze “twentyseventeen”. Damit nach dem Update die Änderungen erhalten bleiben, habe ich mich für den Customizer-Eintrag entschieden, um dort das zusätzliches CSS (Verweis zu den Fonts) einzutragen. Die Fonts sind auf dem Server, die Pfade habe ich überprüft. Ich bin ratlos.
/* Local Google Fonts: pt-sans-narrow-regular – latin */
@font-face {
font-display: fallback;
font-family: ‘PT Sans Narrow’;
font-style: normal;
font-weight: 400;
src: url(‘./assets/fonts/pt-sans-narrow/pt-sans-narrow-v18-latin-regular.woff2’) format(‘woff2’), url(‘./assets/pt-sans-narrow/pt-sans-narrow-v18-latin-regular.woff’) format(‘woff’),
url(‘./assets/fonts/pt-sans-narrow/pt-sans-narrow-v18-latin-regular.ttf’) format(‘truetype’);
}
Wo dieses zusätliche css steht, weiss ich nicht. Scheinbar ist der Anfangspunkt des Pfades dann falsch.
Vielleicht kannst Du mir helfen.
Viele Grüße im Voraus,
Regina
Hallo @Regina,
vielen Dank für deine Anfrage. Leider habe ich nur bedingt Informationen, um dir eine Lösung anzubieten. Dennoch versuche ich es einmal.
Werden die Schriftarten nicht geladen? Wenn die Schriftarten im Themes Ordner liegen, musst du den Pfad anpassen: /wp-content/themes/twentyseventeen/assets/fonts/assets/fonts/pt-sans-narrow/pt-sans-narrow-v18-latin-regular.woff2
Ob die Pfade stimmen, findest du am einfachsten raus, wenn du diese in deinem Browser aufrufst. Bei Schriftarten sollten diese automatisch heruntergeladen werden, wenn der Link korrekt ist, z.B.:
Neuer Link: https://[deine-domain]/wp-content/themes/twentyseventeen/assets/fonts/assets/fonts/pt-sans-narrow/pt-sans-narrow-v18-latin-regular.woff2
Dein Link: https://[deine-domain]./assets/fonts/pt-sans-narrow/pt-sans-narrow-v18-latin-regular.woff2
/* Local Google Fonts: pt-sans-narrow-regular – latin */
@font-face {
font-display: fallback;
font-family: ‘PT Sans Narrow’;
font-style: normal;
font-weight: 400;
src: url(‘/wp-content/plugin/themes/twentyseventeen/assets/fonts/pt-sans-narrow/pt-sans-narrow-v18-latin-regular.woff2’) format(‘woff2’), url(‘/wp-content/plugin/themes/twentyseventeen/assets/pt-sans-narrow/pt-sans-narrow-v18-latin-regular.woff’) format(‘woff’),
url(‘/wp-content/plugin/themes/twentyseventeen/assets/fonts/pt-sans-narrow/pt-sans-narrow-v18-latin-regular.ttf’) format(‘truetype’);
}
Viele Grüße
Marc von Forge12