Skip to main content

DSGVO-konform: Google Fonts lokal auf eigenem Webserver in WordPress einbinden!

  • SEO-Küche Logo


PDF herunterladen

Google Fonts solltet Ihr lokal in WordPress einbinden, denn dies ist aufgrund der DSGVO notwendig. Sollte Google Fonts standardmäßig eingebunden sein, d.h. über den Google-Server, werden Daten wie IP-Adresse, Browser oder Referrer an Google übermittelt. Zwar werden laut Google keine Cookies gespeichert, trotzdem könnte Google in der Theorie die Nutzeraktivitäten aufzeichnen.

Dies kann im Rahmen der DSGVO zu einem rechtlichen Risiko führen. Erst im Januar 2022 musste eine Webseitenbetreiberin laut Urteil des Landgericht München Schadenersatz leisten, weil sie Google Fonts über den Google-Server eingebunden hatte. Wir erläutern Euch daher, wie Ihr Google Fonts auf einem eigenen Server lokal in WordPress einbindet.

Was sind Google Fonts?

Google bietet Euch eine große Auswahl an Fonts, die Ihr auf Eurer Webseite einbinden könnt. Die Schriftarten könnt Ihr herunterladen und auf Eurer Website integrieren.

1. google fonts auswahl
Abb. 1: Eine große Auswahl an Google Fonts zum kostenlosen Herunterladen.

Google Font Tester nutzen und eigene Website prüfen

Bevor ihr euch darüber Gedanken macht, ob Ihr Google Fonts lokal einbinden müsst, solltet ihr eure WordPress Website prüfen. So könnt ihr schnell herausfinden, ob Google Schriftarten extern geladen werden. Die SEO-Küche stellt dafür ein praktisches Tool zur Verfügung, mit welcher ihr dies problemlos selbst testen könnt.

google fonts tester
Abb. 2: Google Fonts Prüftool der SEO-Küche

Google Fonts auf einer WordPress-Website

Bevor wir zur lokalen Einbindung der Google Fonts auf einem eigenen Server kommen, schauen wir uns zunächst einmal die WordPress-Website an. Hier ist es unter Umständen relativ einfach, die Google Fonts lokal einzubinden. Hierfür müssen wir zunächst herausfinden, welche Fonts Ihr nutzt. Ein Anhaltspunkt können dabei die Theme-Optionen sein, welche sich im Adminbereich befinden. Innerhalb der Theme-Einstellungen findet Ihr dann einen Unterpunkt „Typografie, Typography, Fonts oder Schriftarten“.

3. fonts wordpress
Abb. 3: Verwendete Fonts auf einer WordPress-Seite finden.

In anderen Fällen werden Google Fonts auch freiwillig oder unfreiwillig über Plugins oder externe Codes auf der Webseite eingebunden, z.B. bei reCAPTCHA, Google Maps sowie anderen Google-Diensten oder bei WP Google Fonts.

Um ganz auf Nummer sicher zu gehen, solltet Ihr auch über die Entwicklerkonsole in Eurem Browser nochmal prüfen, ob Google Fonts geladen werden. Hierfür einfach einen Rechtsklick auf Eurer Webseite im Browser machen und den Menüpunkt „untersuchen“ anwählen. Anschließend auf Sources klicken und alle Quellen einsehen, die auf Eurer Webseite genutzt werden. Google Fonts findet Ihr unter:

  • googleapis.com
  • fonts.gstatic.com
4. entwickler konsole fonts
Abb. 4: Google Fonts mithilfe der Entwicklerkonsole finden.

Theoretisch muss man die Google Fonts bei einer WordPress-Seite nicht erst auf den Server installieren, um sie lokal einzubinden. Demnach geht es in manchem Fällen auch einfacher, indem man die notwendigen Einstellungen direkt im Theme vornimmt. Beispielsweise bieten die WordPress-Themes Avada, Divi und Enfold die Möglichkeit, über die Theme-Einstellungen die Google Fonts lokal einzubinden.

Sollte das nicht möglich sein, gibt es eine weitere einfache Option: Das praktische WordPress-Plugin OMGF. Das Plugin hilft Euch, Google Fonts auf Eurer Seite zu finden, sie zu löschen oder/und diese lokal einzubinden. OMGF Pro erledigt alle Schritte sogar automatisch.

5. omgf
Abb. 5: WordPress-Theme OMGF, um Google Fonts lokal einbinden zu können.

Warum sollte man Google Fonts lokal einbinden?

Diese Frage ist schnell beantwortet: Damit Eure WordPress Website DSGVO-konform bleibt und Ihr keine rechtlichen Konsequenzen fürchten braucht. Sollte man Google Fonts aber überhaupt nutzen? Ein weiteres Manko, das im Grunde genommen gegen den Einsatz von Google Fonts allgemein spricht, ist die Ladegeschwindigkeit der Webseite. Wie wir alle Wissen ist PageSpeed einer der wichtigsten Ranking Faktoren. Wer also hiermit Probleme hat, sollte überlegen, ob er Google Fonts nutzen muss.

Sobald eine Webseite aufgerufen wird, die Google Fonts nutzt, greift der Browser auf den Google-Server zu und lädt beim Prüfen der Aktualität im Hintergrund eine große Menge Daten. Dies verlangsamt die Ladegeschwindigkeit Eurer Webseite und führt im schlimmsten Fall zu Einbußen beim Ranking. Nichtsdestotrotz sorgen Google Fonts für den persönlichen Touch einer Webseite, daher solltet Ihr abwägen, ob und inwieweit Ihr sie einsetzen möchtet.

Google Fonts auf dem eigenen Server lokal einbinden

Um Google Fonts lokal einzubinden, müsst Ihr sie zunächst herunterladen und anschließend auf den eigenen Server hochladen. Die Open-Source-Fonts von Google könnt Ihr auf einer beliebigen Website verwenden – sowohl gewerblich als auch privat.

Google Fonts identifizieren

Bevor wir die gewünschten Google Web Fonts auf dem Server installieren, müssen wir herausfinden, welche Ihr auf Eurer Webseite nutzt. Wie das bei einer WordPress-Webseite geht, haben wir Euch im oberen Abschnitt gezeigt.

Ansonsten raten wir Euch, wieder die Entwicklerkonsole zu nutzen (siehe Abbildung 3). Im Browser auf Eurer Webseite rechts klicken und „untersuchen“ anwählen und dann auf den Reiter „Source“ klicken.

Google Fonts herunterladen

Damit wir die Google Fonts herunterladen können, müssen wir auf die Website Google Fonts zugreifen und die Schriftart suchen.

6. google fonts herunterladen
Abb. 6: Google Fonts herunterladen und lokal auf dem eigenen Server einbinden.

Nun kann man durch Klicken auf „Download family“ alle Styles herunterladen oder einzelne durch „select this style“ auswählen. Wir wählen alle Styles zum Herunterladen aus. Ihr erhaltet eine gepackte ZIP-Datei.

7. google fonts download
Abb. 7: Alle Styles einer Google Fonts Schriftart herunterladen.

Format der Google Schriftarten ändern

Ihr seht, dass Ihr sogenannte TrueType-Schriftartendateien (.ttf) erhalten habt. Jedoch könnt Ihr diese nicht auf Eurem Server hochladen, sondern müsst sie zunächst in das Format .woff, .woff2 oder .eot konvertieren. Hierfür könnt Ihr transfonder.org, convertio.to oder cloudconvert.com nutzen.

Diese Vorgehensweise mag etwas kompliziert sein, einfacher geht es hingegen mit dem Google Web Fonts Helper.

8. google fonts herunterladen
Abb. 8: Mit dem Google Web Fonts Helper Schriftarten herunterladen.

Dieser Dienst bietet Euch die Möglichkeit, die gewünschte Schriftart herunterzuladen und dadurch alle passenden Font-Formate und CSS-Codes parat zu haben.

9. google web fonts helper
Abb. 9: Font-Formate und CSS-Codes mit dem Google Webfonts Helper herunterladen.

Google Fonts auf dem eigenen Server installieren

Sobald alle Schriftarten im richtigen Format heruntergeladen sind und Ihr den CSS-Code zur Hand habt, könnt Ihr die Dateien auf den FTP-Server eurer WordPress Website laden. Legt die Fonts in ein Unterverzeichnis /fonts/ Eures Child-Themes.

10. fonts upload
Abb. 10: Google Fonts auf den Server hochladen.

In die CSS-Datei des Child-Themes kopiert Ihr für alle notwendigen Google Fonts den CSS-Code, den Ihr von Google Webfonts Helper erhalten habt. Zum Beispiel:

11. css code google fonts
Abb. 11: CSS-Code für die Integration der Google Fonts.

Stellt sicher, dass Ihr den richtigen Zielpfad für die Schriftartendateien habt. Als nächstes müsst Ihr in der CSS-Datei des WordPress Child-Themes den Schriften die gewünschten Elemente zuordnen. Das kann wie folgt aussehen:

12. fonts zuordnen

Warnung: Prüft, ob Google Fonts tatsächlich lokal eingebunden ist!

Zum Schluss solltet Ihr unbedingt prüfen, ob die Google Fonts tatsächlich erfolgreich lokal eingebunden wurden. Unter Umständen kann es hier zu Komplikationen kommen, da viele WordPress Themes Google Fonts zur Verfügung stellen und trotzdem vom Google-Server laden. Möglichenfalls müsst Ihr Euch mit dem Anbieter direkt in Verbindung setzen oder einen Experten zurate ziehen, um die Google Fonts zu deaktivieren. In einigen Fällen kann es notwendig sein, einen Code in die functions.php des Child-Themes einzutragen.

Ferner könnt Ihr auch das Plugin Remover Google Fonts References installieren, aktivieren und nutzen. Nachdem Ihr den Cache gelöscht und die Seite neu geladen habt, könnt Ihr prüfen, ob die Google Fonts noch geladen werden. Auch die Entwicklerkonsole gibt Euch nochmal Aufschluss darüber, ob die Google Fonts lokal eingebunden wurden oder nicht. Anstatt der vorher angezeigten fonts.googleapis.com und fonts.static.com sollten die Schriften nun lokal aufgeführt werden.


Häufig gestellte Fragen

Google Fonts sind kostenlose Schriftarten, die Ihr auf Eurer Website einbauen könnt. Dank einer großen Auswahl an unterschiedlichen Fonts könnt Ihr Eurer Homepage ein ganz individuelles Aussehen verleihen.
Damit Eure Website weiterhin DSGVO-konform ist und Ihr keine rechtlichen Konsequenzen fürchten müsst, sollten die Google Fonts lokal eingebunden werden. Ist dies nicht der Fall, hat der Google Server Zugriff auf personenbezogene Daten wie bspw. die IP-Adressen der Nutzer.
Zum einen kann die Problematik mit den geltenden Datenschutzrichtlinien gegen die Nutzung von Google Fonts sprechen, zum anderen haben sie unter Umständen eine negative Auswirkung auf die Ladegeschwindigkeit der Website. Da PageSpeed ein bedeutender Ranking-Faktor ist, sollte man abwägen, inwieweit der Gebrauch von Google Fonts sinnvoll ist. Im Hinblick auf die DSGVO-Bestimmungen könnt Ihr die Fonts auf einen eigenen Server laden und das Problem umgehen.
Zunächst müsst Ihr wissen, welche Google Fonts Ihr nutzt. Anschließend ladet Ihr sie auf der Google Fonts Webseite herunter und installiert sie im richtigen Format (z.B. .woff, .eot) auf dem FTP-Server Eurer Webseite. Wer eine WordPress-Webseite hat, kann dies auch mithilfe entsprechender Plugins oder über die Theme-Einstellungen vornehmen.
Habt Ihr die Google Font erfolgreich im richtigen Format (.woff, .eot) heruntergeladen, könnt Ihr diese in ein Unterverzeichnis /fonts/ in Euren Child-Theme hochladen. Anschließend müsst Ihr noch den CSS-Code anpassen.

Weiterführende Informationen & Quellen

  • Laut Blogmojo kann es einige Nachteile haben, Google Fonts über den eigenen Server zu laden. Zu nennen sind hier die größere Belastung des eigenen Servers, fehlende Updates der Webfonts, der größere Zeitaufwand bzw. die Mehrkosten und die zusätzliche Installation von Plugins (Stichwort: PageSpeed).
  • Elbnetz weist nochmal darauf hin, dass unbedingt ein abschließender Test durchgeführt werden sollte, um zu prüfen, ob die Verbindung zum Google Server tatsächlich gekappt wurde.
  • Dr-DSGVO warnt, dass das Einbetten von Google Fonts seit dem Urteil des LG München als rechtswidrig bzw. nicht datenschutzkonform eingestuft wird. Es verstößt gegen Art. 5 Abs. 1 DSGVO.
  • tn3 erklärt, dass Fonts auf 2 Arten eingebunden werden können: dynamisch oder statisch. Bei der statischen Variante werden die Fonts heruntergeladen und lokal in eine Webseite eingebunden – nur diese Variante ist datenschutzrechtlich die unbedenklichere, da so beim Besuch der Webseite keine Verbindung zum Google-Server aufgebaut wird.

Ähnliche Beiträge

bannerwerbung

Erfolgreiche Bannerwerbung – Anleitung & Beispiele

Erfolgreiche Bannerwerbung wirkt und steigert die Nutzerzahlen einer Webseite. Ohne dieses Werbemittel kommt kaum eine Website aus, aber nur dann, wenn die Bannerwerbung richtig gemacht ist. Je nach Banner-Design kann es jedoch passieren, dass Banner auf einer Webseite kaum sichtbar sind. Genau hier liegt das Problem, denn dadurch erzielt die […]

domainbewertung

Domainbewertung – Was ist eine Domain wert?

Eine realistische und seriöse Domainbewertung ist sowohl für den Inhaber als auch den Käufer der Domain wichtig. Als Domaininhaber sollte man daher immer Kenntnis über den Marktwert der eigenen Domain haben, vor allem dann, wenn sie zum Verkauf aussteht. Was den Wert einer Domain beeinflusst, wie Ihr eine Domainbewertung durchführt […]

ratgeber schreiben anleitung

Wie schreibe ich einen Ratgeber? Umfassende Anleitung inkl. Beispielen

Einen Ratgeber zu schreiben ist zwar kein Hexenwerk, aber in gewisser Weise eine Kunst. Ein Ratgeber muss prägnant und leicht verständlich komplizierte Probleme erläutern und ein großes Spektrum unterschiedlicher Leser abholen können. Der Ratgeberbeitrag muss für Laien und Fortgeschrittene gleichermaßen interessant sein und einen Mehrwert bieten. Darüber hinaus sollte ein […]

WordPress-Sitemap erstellen – So optimiert Ihr das Crawling

Eine WordPress-Sitemap ist wichtig, um Google das Crawlen der Webseite zu erleichtern. Sitemaps sind ein wichtiger Bestandteil einer suchmaschinenoptimierten Website. Darüber hinaus helfen Sitemaps auch Euren Lesern und Kunden, sich besser auf der Webseite zu orientieren. Eine WordPress-Sitemap zu erstellen, sollte daher unbedingt zu Euren SEO-Praktiken gehören. In diesem Beitrag […]

WordPress-Backup erstellen – So sichert Ihr Eure Website!

Ein WordPress-Backup solltet Ihr immer erstellen, um alle wichtigen Daten Eurer Webseite zu sichern. Sobald WordPress nicht mehr einwandfrei funktioniert, muss ein aktuelles Backup aufgespielt werden. Daher ist es besonders wichtig, in regelmäßigen Abständen ein WordPress-Backup zu erstellen. Die Ursachen, warum WordPress ein technisches Problem hat, sind vielfältig, z.B. inkompatible […]

keywords finden

Die richtigen Keywords finden – Tipps und Tricks zur Recherche

Bevor man den Content einer Webseite für Suchmaschinen optimieren und SEO-Texte schreiben kann, muss man die richtigen Keywords finden. Nur auf Basis einer guten Keyword-Recherche, die wichtiger Bestandteil Eurer SEO-Strategie sein sollte, kann die Suchmaschinenoptimierung (SEO) erfolgreich sein. Doch wie finde ich Keywords und was macht einen guten Suchbegriff aus? […]