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

B2B-Content-Marketing: Anleitung und Beispiele aus der Praxis

Content-Marketing ist auch für B2B (Business to Business) ebenso wichtig wie für B2C (Business to Customer). Dabei mögen grundlegende Aspekte zwar gleich sein, dennoch müsst Ihr bei B2B einige unterschiedlichen Herangehensweisen beachten. In diesen Beitrag erläutern wir Euch, welche Ziele hinter Content-Marketing für B2B stecken, welche Content-Formate nützlich sind und […]

B2B-SEO: Mehr Traffic & Sichtbarkeit für B2B-Unternehmen

Ein durchdachtes B2B-SEO und B2B-Content-Marketing sind wichtig, um mit der eigenen Webseite bei Google zu ranken. Hierbei geht es unter anderem um guten Content sowie eine professionelle Keyword-Recherche, aber auch um andere essenzielle SEO-Bereiche. Jedoch unterscheidet sich SEO für B2B und B2C insbesondere bei der Identifikation der Suchintentionen und Erstellung […]

e mail marketing grundlagen tipps

E-Mail-Marketing: Grundlagen und Tipps für Anfänger

E-Mail-Marketing ist ein wichtiger Bestandteil Eures Online-Marketings, der wichtig für Eure Reichweite und den Traffic ist. Es ist eine schnelle und günstige Möglichkeit, potenzielle Interessenten und Kunden zu erreichen. Mit nur wenig Aufwand könnt Ihr ansprechende Newsletter erstellen und Eure Zielgruppe über Rabattaktionen, Events und neue Produkte bzw. Beiträge informieren. […]

Die 8 besten WordPress Caching Plugins für mehr Pagespeed

Um den PageSpeed Eurer Webseite zu optimieren, müsst Ihr Daten im Cache (deutsch: Zwischenspeicher) speichern. Hierfür gibt es spezielle Caching-Plugins für WordPress. Wie wichtig die PageSpeed-Optimierung Eurer Website für das Ranking, die Absprungrate, Customer-Journey und andere SEO-Faktoren ist, müssen wir nicht mehr betonen. Mit den entsprechenden Caching-Tools könnt Ihr Eure […]

die besten shopsysteme

Shopsysteme im eCommerce: Die 7 besten Webshops 2022

Das beste Shopsystem für die Umsetzung eines E-Commerce-Projekts zu finden, kann eine Herausforderung darstellen. Es gibt viele verschiedene Systeme, wobei Euch einige mehr Freiheiten schenken als andere, aber dafür Verknüpfungsmöglichkeiten und Vorteile bieten. Ferner sind die einzelnen Shopsysteme nicht miteinander vergleichbar, da es verschiedene Arten gibt: SaaS-Lösungen, Komplettlösungen, Open-Source-Shopsysteme und […]

Mehr Traffic generieren

Mehr Traffic generieren: 14 Tipps für Online-Shops & Websites

Mit nur wenigen Optimierungsmaßnahmen könnt Ihr mehr Traffic generieren und mehr Besucher für Euren Onlineshop oder Eure Webseiten erhalten. Mit einer nachhaltigen Online-Marketing-Strategie könnt Ihr langfristig gute Ergebnisse erzielen. Bevor wir Euch alle 14 Tipps verraten, wie Ihr mehr Traffic auf Eure Website bekommt, erläutern wir Euch kurz, was man […]