Wenn du auf der Suche nach einer einfachen Möglichkeit bist, in WordPress Google Fonts lokal einbinden zu können, dann bist du in diesem Artikel genau richtig.
Generell könntest du zwar den Weg gehen, Google Fonts manuell einzubinden, jedoch geht es unglaublich schneller und einfacher mit dem WordPress Plugin OMGF Pro*, welches es auch als kostenlose Version gibt.
Wie einfach, das zeige ich dir in wenigen Augenblicken!
1. Warum solltest du Google Fonts lokal einbinden?
Sobald Google Fonts über den Google Server geladen werden, können Nutzerdaten wie IP-Adresse, verwendeter Browser, etc. von Google abgegriffen und theoretisch dazu verwendet werden, Nutzeraktivitäten zu speichern und nachzuverfolgen.
Dies ist laut einem Urteil vom 20.01.2022 aber nicht DSGVO-konform.
Entsprechend sollten Google Fonts lokal auf deinem Server liegen, damit Google darauf nicht zugreifen und auch keine Nutzeraktivitäten einsehen kann.
Leider wurde auch bereits einer Website-Betreiberin aus München im Rahmen eines Urteils eine Schadensersatzzahlung auferlegt, weil sie Google Fonts eben nicht lokal auf ihrer Website eingebunden, sondern über Google Server geladen hatte.
Ein gefundenes Fressen für Abmahn-Anwälte!
2. Überprüfe deine Website nach Google Fonts
Damit du herausfindest, welche Google Fonts du benutzt und welche ersetzt werden müssen, musst du dir erst einmal darüber klar sein, daß Google Fonts unterschiedlich eingebunden werden können:
- über dein Theme (z.B. Astra*, GeneratePress*, Thrive Theme Builder*)
- über deinen Pagebuilder (wie Thrive Architect*)
- über ein Google Fonts Plugin
- Dienste, wie z.B. Google Maps, reCaptcha, etc.: Hier bleibt dir oft nichts anderes übrig, als komplett darauf zu verzichten, da du die externe Schriftart über iframes nicht deaktivieren kannst.
Entsprechend reicht es nicht, wenn du lediglich in deinem Theme nachsiehst, denn so entgehen dir gegebenenfalls die weiteren „Übeltäter“.
Achtung: OMGF Pro* erledigt für dich nachher die ganze Arbeit, Google Fonts auf deiner Website aufzuspüren. Die Kontrolle, ob noch Google Fonts auf deiner Website vom Google Server geladen werden, findet eigentlich erst nach dem Einsatz von OMGF Pro statt.
Jedoch kann es kein Nachteil sein, wenn du bereits vorab weißt, wie du Google Fonts auf deiner Website aufspürst.
2.1 Schau in die Entwickler-Konsole
Klicke im Browser (ich benutze hier Google Chrome) auf deiner eigenen Website auf die rechte Maustaste und danach auf „Untersuchen“.
Klicke in der Konsole auf den Tab „Sources“ und du siehst – sofern Fonts extern geladen werden – 2 Einträge, hinter denen sich deine Google Fonts verstecken:
- fonts.googleapis.com
- fonts.gstatic.com
2.2 Benutze einen Google Fonts Checker
Ganz einfach kannst du deine Webseite nach Google Fonts überprüfen, wenn du einen sogenannten Google Fonts Checker benutzt.
Denke nur daran, daß du mehrere URLs überprüfen musst, denn ansonsten wird nur deine Startseite geprüft.
3. OMGF Pro Plugin installieren & einrichten
3.1 OMGF Plugin installieren
a) kostenlose Version
Je nachdem, ob du die kostenlose Version verwendest oder OMGF Pro, erhältst du die Installationsdateien jeweils von verschiedenen Orten.
Die kostenlose Version musst du in beiden Fällen direkt über dein WordPress Backend unter „Plugins > installieren“ suchen und installieren.
Wenn du dir nicht sicher bist wie das geht, schau einfach hier in meine Anleitung „WordPress Plugin installieren„.
Anschließend einfach auf „aktivieren“ klicken und anschließend über das WordPress Backend unter „Einstellungen > Optimize Google Fonts“ ins OMGF Dashboard springen.
b) Bezahlversion
Nachdem du die kostenlose Version installiert hast, musst du über „Plugins > installieren“ noch die Installationsdatei von OMGF Pro hochladen, welche du über die Kauf-E-Mail erhalten hast.
Auch diese Version aktivieren und über „Einstellungen > Optimize Google Fonts“ ins OMGF Dashboard springen.
3.2 Google Fonts erkennen
a) Erkennungseinstellungen aktivieren (nur bei PRO)
Falls du OMGF Pro benutzt, gehst du zum Reiter „Erkennungseinstellungen“ und aktivierst alle Check-Boxen bei „Erweiterte Verarbeitung„.
Damit findet OMGF wirklich alle Google Fonts auf deiner Website, auch solche, die z.B. per JavaScript nachgeladen werden.
Klicke auf „Änderungen speichern“ und wechsle wieder zum TAB „Local Fonts„.
b) Erkennung starten
Scrolle ganz nach unten und klicke auf „Speichern & Optimieren“.
Nun startet der Scan und nach kurzer Zeit wird dir eine Übersicht angezeigt, welche Google Fonts auf deiner Website über die Google Server geladen werden.
Auf meiner Testseite wird hier nur eine angezeigt, bei dir kann die Liste schon erheblich länger sein.
Übrigens:
Die in dieser Liste angezeigten Schriften werden bereits lokal geladen!
Wenn du die kostenlose Version benutzt, kannst du an dieser Stelle noch 2 Einstellungen treffen:
- Vorladen (load early): Damit deine Website schneller lädt, kannst du deine Schriften vorladen lassen. Markieren dazu einfach alle Checkboxen (oder zumindest jene „Above the fold“) und klicke auf speichern.
- Nicht laden (don’t load): Benötigst du manche Schriftarten gar nicht, dann kannst du das Laden verhindern, indem du die Checkbox aktivierst und speicherst.
Wenn du OMGF Pro benutzt, kannst du an dieser Stelle unter anderem noch eine Fallback-Schriftart festlegen.
4. Überprüfen, ob Google Fonts lokal eingebunden sind
Hier führst du einfach die Schritte aus Punkt 2 nochmal durch.
Achte einfach auf folgende Dinge:
- Lösche deinen Cache, nachdem du in OMGF fertig bist
- Öffne einen Inkognito-Tab (falls du per Console prüfst)
- Es dürfen keine Google Fonts mehr angezeigt werden
Fertig!
5. Ist OMGF Pro kompatibel zu Thrive Theme Builder?
Falls du den Thrive Theme Builder* von Thrive Themes benutzt, musst du darauf achten, daß du OMGF Pro benutzt.
Thrive Theme Builder verwendet Inline-@import-Anweisungen, um Google Fonts zu laden, weswegen du in OMGF Pro unter „Erkennungseinstellungen“ die Option „Inline-Stile verarbeiten“ aktivieren musst, um Google Fonts lokal bereitzustellen.
Außerdem musst du unter „Thrive Dashboard > Project Lightspeed > Font Settings“ den Punkt „Enable Google Font Optimization“ deaktivieren.
6. Benötige ich immer OMGF, um Google Fonts lokal zu laden?
Wenn dein Theme dir keine anderen Möglichkeiten bietet, dann kommst du nicht herum, ein Plugin wie OMGF Pro* zu benutzen oder Google Fonts manuell einzubinden.
Themes wie Astra*, GeneratePress* oder Pagebuilder wie ElementorPro, bieten dir die Möglichkeit, Google Fonts per Aktivierung eines Schiebereglers oder durch Hochladen der Schriftarten lokal zu laden.
Fazit
Dafür daß OMGF Pro sämtliche Google Fonts auf deiner Website findet und dafür sorgt, daß wirklich gar nichts mehr von Google-Servern geladen wird, ist der Preis von 19€ für 1 Website ein lächerlich geringer oder zumindest unglaublich fairer Preis für das Plugin.
Die weiteren Preise lauten 39€ für 10 Websites und 79€ für 100 Websites.
Schau dir das Plugin definitiv an, um in Zukunft Google Fonts lokal laden zu lassen.