Schritt für Schritt: Google Fonts lokal & DSGVO-konform in WordPress einbinden
Es hat verschiedene Vorteile, Google Fonts lokal in deine WordPress-Website einzubinden. Zum einen verstößt du nicht gegen die DSGVO und zum anderen erhöhst du auch etwas die Ladezeit deiner Website.
Beides gute Gründe, dass du dich mit dem Thema Google Fonts beschäftigen solltest.
In diesem Beitrag zeige ich dir verschiedene Methoden, wie du ohne viel Aufwand Google Fonts lokal & DSGVO-konform in WordPress einbinden kannst.
Also legen wir los.
Inhaltsverzeichnis
Warum du Google Fonts lokal & DSGVO-konform in WordPress einbinden sollte
Wenn du Google Fonts einsetzt, wird bei jedem Aufruf deiner Website eine Anfrage an Google Server geschickt. Dabei werden Daten wie die IP-Adresse deiner Besucher an Google übermittelt.
Außerdem kostet jede Anfrage auch etwas Zeit und verringert die Geschwindigkeit deiner Website.
Wie du vermutlich weißt, sind die übermittelten Daten nicht DSGVO-konform. Es gab diesbezüglich bereits im Januar 2022 ein Urteil des LG München, bei dem eine Website-Betreiberin zu einer Schadensersatzzahlung wegen des Einsatzes von Google Fonts auf ihrer Website verurteilt wurde.
Auf Grundlage dieses Urteils gab es auch schon mehrere Abmahnwellen, wie wohl die bekannteste aus Österreich. Es wird zwar bereits gegen diese Abmahnanwälte und ihre Mandanten selbst ermittelt, aber das heißt ja nicht, dass es keine weiteren Abmahnungen diesbezüglich geben kann.
Sollte das noch kein ausreichender Grund für dich sein, erwähne ich es erneut, dass die lokale Einbindung von Google Fonts auch die Ladezeit deiner Website etwas verbessert.
Im weiteren Verlauf stelle ich dir drei verschiedene Methoden vor, wie du das umsetzen kannst.
Methode 1: über dein Theme
Wenn du ein Theme wie Astra* nutzt, kannst du dich glücklich schätzen, da du nur wenige Klicks benötigst, um Google Fonts lokal zu speichern.
Dazu musst du lediglich unter Astra > Dashboard > Einstellungen > Leistung die entsprechende Einstellung aktivieren und schon werden deine Google-Schriftarten lokal gespeichert. Zusätzlich kannst du hier auch gleich einstellen, dass deine lokalen Schriftarten vorgeladen werden, was zusätzlich für etwas mehr Geschwindigkeit sorgt.
Auch andere Themes bieten diese Option mittlerweile an. Schau einfach mal in den Theme-Optionen oder frage die Entwickler deines Themes.
Aber beachte bitte bei dieser Methode, werden nur die Schriftarten, die über dein Theme kommen, lokal gespeichert.
Solltest du weitere Plugins nutzen, die Google Fonts einbinden, dann musst du mit einer der beiden folgenden Methoden weitermachen.
Methode 2: mit dem Plugin OMGF
Sollte dein Theme dir nicht ermöglichen, Schriftarten lokal zu speichern oder du nutzt ein Plugin, dass Google Fonts einbinden, kannst du das Plugin OMGF nutzen.
Dieses Plugin findet selbstständig sämtliche auf deiner Website eingebundenen Google Fonts, lädt sie auf deinen eigenen Server und sorgt zusätzlich dafür, dass keine weiteren Aufrufe an Google-Server bezüglich der Fonts gesendet werden.
Die Einrichtung ist auch noch kinderleicht, dazu musst du nach der Installation des Plugins lediglich auf “Speichern & Optimieren” klicken und schon kümmert sich das Plugin um alles Weitere.
Klingt zu schön, um wahr zu sein?
Ist es eigentlich auch und dazu ist das Ganze noch kostenlos.
Mir ist bisher nur eine Website untergekommen, bei der die kostenlose Version nicht ausgereicht hat, um alle Google Fonts zu finden. Diese Website nutzt den Page-Builder und weitere Plugins von Thrive.
Aber auch das war kein großes Problem, denn für diese seltenen Fälle gibt es die Pro-Version OMGF Pro*. Die Pro-Version hat erweiterte Features, um auch “hartnäckige” Einbindungen von Google Fonts zu erkennen und lokal zu speichern.
Das Tolle an dem Plugin ist, da bei jedem Seitenaufruf geprüft wird, ob sich Google Fonts befinden, kannst du insbesondere mit der Pro-Version auch zukünftig auf der sicheren Seite sein. Also, wenn du z.B. neue Plugins installierst.
Wenn du darauf nicht verzichten möchtest, solltest du zumindest sicherstellen, dass diese Ressourcen bis zur Zustimmung des Besuchers geblockt werden. Dabei hilft dir in den meisten Fällen dein Cookie-Banner-Plugin.
Methode 3: Google Fonts manuell in WordPress einbinden
Wenn du, aus welchem Grund auch immer, kein Plugin nutzen möchtest, kannst du Google Fonts auch manuell lokal in deiner Website einbinden.
Dazu erkläre ich dir Schritt für Schritt, wie du vorgehen musst.
1. Google Fonts ermitteln
Zunächst einmal musst du natürlich wissen, welche Google Fonts du einbinden musst.
Dazu kannst du als Erstes einmal deine Theme-Einstellungen aufrufen.
Meist findest du die Schriftarten im Customizer also unter Design > Customizer. Aber möglicherweise hat dein Theme diese Einstellungen aber auch in einem eigenen Menüpunkt in der Sidebar.
Neben den Theme-Einstellungen solltest du deine Website auch mit der Entwickler-Konsole deines Browsers untersuchen.
Um die Konsole in Chrome zu öffnen, machst du irgendwo im Frontend deiner Website einen Rechtsklick und wählst “untersuchen”.
In der Konsole öffnest du den Tab Quellcode und solltest dort in der linken Sidebar einen oder beide der folgenden Punkte finden:
- fonts.googleapis.com
- fonts.gstatic.com
Auf der rechten Seite siehst du dann alle Schriftstärken (font-weight) und Schriftstyle (font-style).
Notiere dir nun alle Schriftarten und die verschiedenen Schriftstärken, diese benötigen wir im nächsten Schritt.
Scrolle die Seiten auch komplett nach unten, denn es kann sein, dass Elemente wie ein YouTube Video erst nachgeladen werden und dabei auch Google Fonts laden.
2. Google Fonts herunterladen
Nachdem du nun weißt, welche Google Fonts auf deiner Website eingebunden werden, musst du nun die Schriftarten herunterladen.
Dazu gehst du auf die Seite Google Webfonts Helper. Dort findest du alle benötigten Dateien ebenso wie den im späteren Schritt benötigten CSS-Code.
Um deine Schriftart herunterzuladen, wählst du die Google Font aus, die du herunterladen möchtest, z. B. Roboto. Folgende Punkte musst du für jede Schriftart konfigurieren:
- Bei Select charsets musst du im Normalfall nichts ändern, es sei denn du nutzt auf deiner Website eine Sprache mit einer anderen Zeichenkodierung als Latein.
- Bei select Styles wählst du die Schriftstärken aus, die du benötigst. 700 solltest du in jedem Fall auswählen, denn das entspricht Fettschrift (bold).
- Bei Copy-CSS wählst du “Best Support”, kopierst den Code und speicherst ihn für später in einem Text-Editor. Unterhalb des Codes könntest du das Verzeichnis ändern, in das wir die Dateien später laden, aber ich würde es einfach so lassen. Solltest du das Verzeichnis ändern, kopierst du den Code natürlich erst nach der Änderung.
- Anschließend kannst du deine Schriftart herunterladen
Wenn du mehrere Google Fonts auf deiner Website nutzt, wiederholst du die 4 Schritte für alle Schriftarten.
3. Google Fonts per FTP auf deinen Server hochladen
Nachdem du die Schriftarten heruntergeladen hast, musst du sie nun auf deinen Server hochladen.
Um per FTP Daten auf deinen Server hochzuladen, kannst du ein Programm wie Filezilla nutzen.
Dazu rufst du das Hauptverzeichnis deiner Website auf, indem WordPress installiert wurde und erstellst dort einen Ordner fonts.
In diesen neuen Ordner lädst du nun die im vorherigen Schritt heruntergeladenen Schriftarten. Aber entpacke die Dateien vor dem Hochladen.
4. CSS-Code in style.css einfügen
Als Nächstes musst du den CSS-Code den du in Schritt 2 gespeichert hast in die style.css Datei deines Themes bzw. Child-Themes einfügen.
Um den CSS-Code einzufügen, verbindest du dich wieder per FTP mit deinem Server und öffnest dort das Verzeichnis deines Child-Themes, dieses findest du unter wp-content > themes > Name deines Child-Themes.
In diesem Verzeichnis findet du auch die style.css-Datei, in die du nun den gesamten CSS-Code aller Schriftarten einfügst.
Alternative zu Schritt 3 & 4: Benutzerdefinierte Schriftarten mit Elementor
Wenn du Elementor Pro* nutzt, kannst du dir Schritt 3 und 4 sparen und die Schriftarten auch über Elementor hochladen. So musst du auch den CSS-Code nicht selbst einfügen.
Dazu klickst du unter Elementor > Benutzerdefinierte Schriftarten auf “ADD NEW”.
Hier musst du folgende Punkte angeben:
- den Namen der Schriftart
- die Schriftstärke
- den Schriftstil
- die verschiedenen Dateien der Schriftart aus Schritt 2 lädst du hier hoch
Dies wiederholst du für jede Schriftvariante, z.B. für Schriftstärke 700 (bold) und auch für alle anderen Schriftarten, die du auf deiner Website einsetzt.
5. Verbindung zu Google Fonts deaktivieren
Egal, ob du die Schriftart und den CSS-Code per FTP hochgeladen hast oder ob du dazu Elementor genutzt hast, müssen wir im nächsten Schritt dafür sorgen, dass es keine Verbindung mehr zu den Google Server gibt.
Dazu benötigen wir ein Plugin.
Sofern du Autoptimize bereits im Einsatz hast, kannst du damit unter Einstellungen > Autoptimize > Extras > Google Fonts deaktivieren.
Alternativ kannst du auch das Plugin Disable and Remove Google Fonts nutzen.
6. Überprüfen, ob die Google Fonts korrekt lokal eingebunden sind
Als Letztes solltest du nun überprüfen, dass deine Schriftarten korrekt geladen werden und es keine Verbindung mehr zu den Google Servern gibt.
Dazu rufst du deine Website am besten im Inkognitomodus auf und öffnest dort, wie im ersten Schritt, mit einem Rechtsklick wieder die Entwicklerkonsole.
Wie im ersten Schritt öffnest du den Tab Quellcode und solltest dort in der linken Sidebar nun keinen der folgenden Punkte mehr finden:
- fonts.googleapis.com
- fonts.gstatic.com
Zusätzlich kannst du den Tab Netzwerk öffnen und dort den Filter Schriftart wählen. Anschließend lädst du deine Seite neu und bekommst dann auf der linken Seite unten eine Liste der geladenen Schriftarten angezeigt. Klickst du eine der Schriftarten an, solltest du auf der rechten Seite bei der Anfrage-URL deine Domain sehen.
Gehe hier alle geladenen Schriftarten durch und überprüfe die Domain.
Wenn du nun keine Verbindungen zu den Google Servern finden kannst und deine Seiten korrekt dargestellt werden hast du alles erledigt.
Scrolle die Seiten auch komplett nach unten, denn es kann sein, dass Elemente wie ein YouTube Video erst nachgeladen werden und dabei auch Google Fonts laden.
Fazit: So einfach kann es sein, Google Fonts lokal & DSGVO-konform in WordPress einzubinden
Wie du siehst, kannst du mit relativ wenig Aufwand und unter Einhaltung der DSGVO, weiterhin Google Fonts auf deiner WordPress-Website nutzen. Zeitgleich tust du auch noch etwas Gutes für die Ladezeit deiner Website.
Hast du noch Fragen, dann nutze die Kommentarfunktion unten.
WordPress-Fan seit über 10 Jahren und Autor von Blogcraft.io
WordPress-Fan seit über 10 Jahren und Autor von Blogcraft.io
Bei Links, die mit einem * markiert sind, handelt es sich um sog. Affiliate-Links. Wenn du einen Kauf über diese Links tätigst, bekommen wir eine Provision und du kannst unsere Arbeit aktiv unterstützen. Danke dafür ❤️
Für dich entstehen dadurch keine weiteren Kosten und du kannst dir sicher sein, dass wir nur Tools empfehlen, die wir auch wirklich für gut erachten.
