Google-Fonts lokal einbinden

Mit Hilfe der bekannten Google-Fonts erhalten Websites ein gefälliges Aussehen und wirken durch die schön gestalteten Schriften (Fonts) deutlich besser als mit den vorhandenen Standard-Schriften. Viele Themes enthalten oft mehrere Google-Fonts, welche normalerweise vom Google-Server nachgeladen werden.

Dies hat zwei Nachteile:

  • Die IP-Adresse des Besuchers wird bereits vor einer Abfrage (Cookie-Banner) an Google übertragen, was nach der DSGVO nicht erlaubt ist. Damit besteht die Gefahr von Abmahnungen (siehe beispielsweise diesen Beitrag).
  • Der Seitenaufbau wird manchmal je nach Internetverbindung zum Google-Server deutlich verlangsamt

Teilweise werden diese Fonts, besonders bei kommerziellen Themes, auch vom Entwickler schon lokal eingebunden, also auf dem eigenen Server gehostet. Das ist von Google auch erlaubt und somit die beste Methode zur Einhaltung der DSGVO-Anforderungen.

Die lokale Einbindung der Google-Fonts kann per PHP-Script, erstellen von CSS-Dateien, umwandeln der Original-Fonts usw. vorgenommen werden. Damit sind aber viele Webmaster ohne technisches Hintergrundwissen überfordert. In vielen Fällen hilft das ausgezeichnete Plugin „OMGF | Host Google Fonts Locally„.

Eine gute Beschreibung zum lokalen Einbau der Google-Fonts befindet sich hier (Schritt 3 Alternative E).

Bei etlichen Themes versagt das Plugin „OMGF“ und zeigt eine Fehlermeldung an:
OMGF couldn’t find required stylesheet handle parameter while attempting to talk to API.
Weiter unten ist beschrieben, wie die Google Fonts auf anderen Wegen eingebunden werden können. I. d. R. wird das Plugin „Disable/Remove Google Fonts“ verwendet.

Zunächst überprüfen wir mit dieser Methode, ob unsere Website die Google-Fonts vom Google-Server lädt oder die Fonts bereits lokal eingebunden sind. Wenn die beiden typischen Google-Einträge in der Auflistung vorhanden sind, installieren wir das erwähnte Plugin „OMGF | Host Google Fonts Locally“ im Dashboard und aktivieren es (wie immer ist ein vorheriges Voll-Backup empfohlen, um ggf. den alten Zustand wieder herzustellen).

Wir klicken in der Plugin-Liste…

 

…oder der Meldung oben auf den markierten Link:

 

Dann nach unten scrollen und zunächst den Cache leeren und den blauen Button anklicken:

 

Anschließend sollte diese Meldung kommen mit der Aufforderung, den Cache nochmals zu leeren:

 

Im Frontend überprüfen wir nun, ob die beiden Google-Links zu den Fonts verschwunden sind. Normalerweise klappt es auf Anhieb und weitere Arbeiten sind nicht mehr erforderlich.

Hinweis:
Wenn das Plugin deaktiviert oder gelöscht wird, werden sofort die Google-Fonts wie früher vom Google-Server nachgeladen. Das vorgeschlagene Plugin macht uns hier die Arbeit sehr leicht.

Weiterführende Links: