Google Fonts in WordPress lokal & DSGVO-konform einbinden

Google Fonts Logo

Geschrieben von Redaktion

Seit über 10 Jahren unterstützen wir unsere Kunden bei allen digitalen Herausforderungen und tragen wesentlich zu ihrem Erfolg bei.

11. August 2022

In diesem Artikel möchten wir Ihnen alle wichtigen Fakten zum Thema Google Fonts und DSGVO mit auf den Weg geben und erklären was es zu beachten gilt. Das betrifft sowohl das Urteil vom Landgericht München, Möglichkeiten zur Prüfung ob Google Fonts auf der eigenen Webseite eingebunden sind, bis hin zu einfachen 1-Klick Lösungen um das Problem der externen Google Fonts in WordPress schnell zu lösen.

Automatic Google Fonts Embedder

 

Google Fonts – was ist das?

Google Fonts Logo

Google Fonts Logo

Falls das Thema Google Fonts für Sie Neuland ist, hier eine kurze Einordnung zum Problem und was Google Fonts sind:

Bei den Google Fonts handelt es sich um eine von Google kostenlos zur Verfügung gestellte Sammlung an Schriften (sogenannte Fonts). Diese Sammlung ist sehr populär und wird weltweit viel genutzt. In der Regel werden die Fonts nicht nur über Google zur Verfügung gestellt, sondern auch über Google Server in Webseiten und Software eingebunden. Es besteht zwar auch die Möglichkeit die Google Fonts herunterzuladen und lokal (direkt und ohne Google Server) einzubinden, dies wird jedoch häufig nicht gemacht.

Die Nutzung der Google Fonts über Google Server hat jedoch auch gute Gründe. Zum einen ist das Datenschutz-Problem mit Google Fonts ein sehr deutsches bzw. europäisches Problem. In vielen anderen Ländern würde man schmunzelnde Blicke ernten, wenn man erklären muss, dass Google Fonts ein Datenschutz-Problem haben.

Weiterhin ist die Integration direkt über Google deutlich schneller möglich und wird in vielen Software-Komponenten oft über die dortige API gelöst, technisch ist es daher auch nicht so einfach dynamische Google Fonts, welche zum Beispiel von einem Nutzer in einem Page-Builder in WordPress jederzeit verändert werden können, lokal zu integrieren. Alleine die Größe aller Font-Dateien wäre gigantisch. Es gibt noch ein paar weitere Vorteile für die Google Fonts über Google Server, welche wir uns an dieser Stelle jedoch sparen, da sich das Thema für uns DSGVO sei Dank ohnehin erledigt hat.

Der Kern des Problems

Wenn Google Fonts über die Google Server abgerufen werden, wird die dynamische IP-Adresse des Nutzers an Google übermittelt. So einer Übermittlung muss gemäß DSGVO jedoch aktiv vom Nutzer zugestimmt werden, bevor diese stattfindet.

Wen betrifft das Problem:

Aufgrund der weiten Verbreitung von Google Fonts ist fast jeder Nutzer bzw. Webseitenbetreiber betroffen, welcher in seinem Theme / WordPress-Webseite die Möglichkeit hat, verschiedene Schriftarten auszuwählen.
In der Regel verbirgt sich hinter genau dieser Funktion zumeist die Google Fonts API über welche dann im Anschluss Google Fonts über entsprechende Google Server eingebunden werden.

Ebenso betroffen sind Nutzer entsprechender Plugins, wobei der Name dies bereits klar erkennen lässt, gemeint sind z.B. Plugins wie Easy Google Fonts oder WP Google Fonts.

Wir erklären Ihnen etwas weiter unten im Artikel, wie Sie Google Fonts in Ihrer Webseite identifizieren können.

Das Urteil des Landgericht München zu Google Fonts

München - Frauenkirche

München – Innenstadt

Mit dem Urteil vom 19.01.2022 hat das Landgericht München jedoch entschieden, dass die Weitergabe der dynamischen IP-Adresse an Google bei Nutzung von Google Fonts ohne explizite Einwilligung des Betroffenen einen Schadensersatzanspruch rechtfertigt.

Ein berechtigtes Interesse sei hier nicht ausreichend gewesen. Dem Besucher der Webseite wurden 100 € zuzüglich Zinsen als Schadensersatz zugesprochen. Weiterhin wurde der Webseiten-Betreiber zur Unterlassung verurteilt. In einem Wiederholungsfall droht ein Ordnungsgeld von bis zu 250.000 €.

Seit einer Entscheidung des Landgerichts München werden vermehrt Abmahnungen an Webseitenbetreiber verschickt, welche Schriftarten von Google-Servern einbinden. Denn das Einbinden von externen Webinhalten wie Google Fonts von US-Webdiensten ist, wie oben beschrieben, ohne Einwilligung der Besucher rechtswidrig.

Weitere Informationen zu den aktuellen Abmahnungen können Sie unter anderem hier finden:

Wie erkenne ich ob meine Webseite Google Fonts nutzt?

Die einfachste Lösung für Laien ist ein Test über den Google-Fonts-Checker von Sicher3. Dort können Sie einfach die URL Ihrer Webseite eintragen und die Seite prüfen lassen. Dabei sollten Sie jedoch dringend beachten, dass eine Prüfung der Startseite nicht bedeutet, dass auch alle Unterseiten frei von Google Fonts sind. Wenn Sie sicher sein wollen, müssten Sie im Grunde jede einzelne Unterseite Ihrer Webseite gegenprüfen, in der Regel ist die Startseite und wichtige Unterseiten bereits eine gute Indikation ob es Google Fonts über Google Server gibt oder nicht.

Was Sie über das Tool nicht ermitteln können, ist die Quelle der Google Fonts, denn diese kann durchaus unterschiedlich sein.

Google Fonts über Entwicklertools prüfen

Für versierte Nutzer gibt es über die Entwickler-Konsole des Browsers deutlich mehr Möglichkeiten Google Fonts und auch deren Quelle zu erkennen. Der folgende Screenshot sowie Infos stammen aus Google Chrome, die Schritte lassen sich jedoch in den meisten Browsern in ähnlicher Form adaptieren.

So können Sie auf Entwicklertools zugreifen:

Dabei handelt es sich um drei mögliche Wege die Entwicklertools zu öffnen, Sie müssen daher nur einen Schritt wählen und nicht alle Schritte durchführen:

  1. Klicken Sie mit der rechten Maustaste auf eine Seite und wählen Sie „Element untersuchen“ aus.
  2. Wählen Sie Anzeigen > Entwickler > Entwicklertools aus.
  3. Verwenden Sie die Tastenkombination „Alt + Befehlstaste + I“.

In den Entwicklertools klicken Sie nun auf den Reiter „Netzwerk„, ggf. müssen Sie die Seite einmal erneut laden, damit hier Ergebnisse angezeigt werden. Nutzen Sie dann die Suche im Netzwerk-Tab um zu ermitteln ob Google Fonts über Google Server eingebunden sind.

Suchen Sie nach den folgenden URL’s „fonts.googleapis.com“ oder „fonts.gstatic.com“ sollte eine von beiden URL’s im Netzwerk-Protokoll auftauchen, verwendet Ihre Webseite Google Fonts.

Google Fonts identifizieren

Sollten Sie auf Ihrer Webseite Ergebnisse finden, so können Sie über die Entwicklertools auch herausfinden woher diese Google Fonts stammen. Klicken Sie dazu einfach einen Eintrag in der Liste an und wählen im Dateimenü, welches sich dann öffnet, den Tab „Initiator“ aus.
Dort sehen Sie z.B. ob die Google Fonts direkt über die Webseite eingebunden sind oder über andere Dienste wie z.B. YouTube oder Google ReCaptcha.

So sieht ein Beispiel für ein YouTube Video mit Google Fonts in der Entwickler-Konsole aus:

Google Fonts über YouTube

In dem Fall müsste das YouTube Video entfernt oder hinter einem Content-Blocker blockiert werden.

Wenn in der Initiatorenkette nur Ihre URL / Domain auftaucht, dann wird der Google Font über Ihr Theme oder ein Plugin geladen von WordPress geladen.

Lösungen zur lokalen und DSGVO-konformen Integration von Google Fonts

Automatic Google Fonts Embedder LogoDie richtige Lösung zur lokalen und DSGVO-konformen Integration von Google Fonts kann durchaus etwas variieren, denn diese hängt stark davon ab, woher die Fonts stammen.

Liegt der Ursprung dieser z.B. in YouTube, Google Maps oder anderen Tools, ist die Vermeidung schwieriger, denn auf diese externen Tools und Dienste haben Sie keinen direkten Einfluss. Unser Plugin bietet selbst für diese komplexere Konstelation mittels eines einfachen Content-Blockers eine Lösung.

Wir wollen uns hier nun mit der häufigsten Form der Google Font Integration beschäftigen. Denn zumeist stammen die Fonts direkt aus den WordPress-Themes oder einem Plugin und sind somit direkt über die eigene Webseite eingebunden. Im folgenden Video erfahren Sie, wie Google Fonts erkannt und mit unserem Plugin lokal integriert werden können. Das betrifft sowohl die Variante aus einem YouTube Video oder Google Maps, genau so wie die Fonts von Themes und Plugins.

Tipp: Verwenden Sie das Divi Theme von Elegentthemes? Dann schauen Sie sich unseren Artikel „Divi DSGVO & Google Fonts lokal einbinden | in 10 Sekunden“ an.

Für diesen Bereich gibt es zwei grundlegende Möglichkeiten um Google Fonts lokal zu integrieren. Eine automatisierte Variante und eine manuelle Variante:

Google Fonts automatisiert lokal in WordPress einbinden

Automatic Google Fonts Embedder

Unser Plugin “Automatic Google Fonts Embedder für WordPress” löst automatisiert innerhalb weniger Sekunden und ohne komplexe Arbeiten das Problem mit der Google Font Integration, welche in den meisten WordPress-Themes und Plugins nicht lokal, sondern über das Google CDN (Google Server) eingebunden werden. Die nicht lokale Integration (also über das Google CDN) der Google Fonts steht nicht im Einklang mit der DSGVO (GDPR). Das “Automatic Google Fonts Embedder” Plugin erkennt automatisch die in WordPress eingebundenen Google Fonts, lädt diese im Hintergrund ebenso automatisch herunter und bindet die Google Fonts lokal ein.

Dabei ist keine komplexe Konfiguration oder größere manuelle Maßnahme notwendig. Das Plugin arbeitet mit dem “WP_Dependencies” System und scannt die dort registrierten Styles auf Google Fonts und sorgt für die entsprechende lokale Integration und Austausch der CSS-Dateien.

Die WP_Dependencies sind der offizielle und korrekte Weg um in WordPress CSS-Dateien und somit auch Google Fonts einzubinden. Durch die Standardisierung dieser Schnittstelle funktioniert unser Plugin mit so gut wie allen Themes, Plugins und Page-Buildern, welche in der Regel ebenfalls diese Schnittstelle für Fonts und Style-Dateien verwenden.

Weiterhin erkennt das Plugin in seiner neuesten Version auch Google Fonts welche über JavaScripte nachgeladen werden oder hart in den HTML-Code oder Customizer geschrieben wurden. Somit deckt das Plugin die größte Bandbreite an Quellen für Google Fonts ab und kann diese zuverlässig erkennen, automatisch herunterladen und lokal einbinden.

Im Gegensatz zu einer manuellen Einbindung ist der große Vorteil dabei, dass unser Plugin automatisch die neuen Schriften herunterlädt, falls diese einmal umgestellt werden oder falls einzelne Unterseiten andere Schriften verwenden als die Startseite. Diese Änderungen werden bei einer manuellen Integration schnell übersehen und vergessen.

Vor allem für Agenturen oder Webdesigner ist dieser Aspekt wichtig, denn diese können nicht immer kontrollieren, ob nicht ein Kunde / Nutzer in seinem Page-Builder einmal die Schriftart wechselt.

Screenshot aus dem Automatic Google Fonts Embedder

Screenshot aus dem Automatic Google Fonts Embedder Plugin

Google Fonts manuell einbinden

Bitte führen Sie diese Schritte nur aus, wenn Sie grundlegende Kenntnisse in diesem Bereich haben, Sie könnten sonst Defekte auf Ihrer Webseite auslösen.

Falls Ihre WordPress-Webseite bereits über ein Child-Theme verfügt, so fügen Sie die im folgenden erwähnten CSS-Codes sowie Font-Dateien in Ihrem Child-Theme ein, dann benötigen Sie kein gesondertes Plugin.

Fonts und Schnitte notieren

Als erstes müssen Sie sich alle verwendeten Google Fonts und Schriftschnitte notieren, damit Sie wissen welche Schriftarten Sie überhaupt herunterladen müssen.

Google Fonts entfernen

Um die Google Fonts aus WordPress zu entfernen, müssen Sie diese mittels wp_dequeue_style() vor der Ausführung entfernen.
Die ID, welche Sie für die Dequeue Funktion benötigen, finden Sie im Quellcode der jeweiligen CSS-Dateien.

Im Quellcode einer WPBakery Webseite lässt sich z.B. etwas in dieser Art finden:

<link rel='stylesheet' id='vc_google_fonts_source_code_pro200300regular500600700900-css' href='https://fonts.googleapis.com/css?family=Source+Code+Pro%3A200%2C300%2Cregular%2C500%2C600%2C700%2C900' type='text/css' media='all' />

Die ID welche Sie für wp_dequeue_style benötigen ist „vc_google_fonts_source_code_pro200300regular500600700900„, ohne den „-css“ Suffix.

Ein Beispiel wie Sie die wp_dequeue_style Funktion verwenden, finden Sie im Code-Beispiel unten. Diese müssen Sie für jede CSS Datei ausführen, welche Google Fonts lädt.

Erstellen des Plugins (überspringen, falls Child-Theme vorhanden)

Öffnen Sie den Ordner /wp-content/plugins/ mit einem FTP-Programm. Darin legen Sie nun einen neuen Ordner mit dem Namen „google-fonts“ an. Im neu erstellen Ordner legen Sie nun einen weiteren Ordner an, dieser bekommt den Namen „fonts„.
Zusätzlich werden 2 Dateien angelegt, einmal „google-fonts.php“ sowie „fonts.css„.

Die Struktur sollte dann wie folgt aussehen:

  • /google-fonts
    • /fonts/
    • /fonts.css
    • /google-fonts.php

Öffnen Sie die Datei „google-fonts.php“ und fügen Sie dort folgenden Code ein:

Anschließend können Sie das Plugin in Ihrem WordPress-System unter „Plugins > Installierte Plugins“ aktivieren. Suchen Sie nach dem Eintrag „Lokale Google Fonts by Bajorat Media“.

Download der Google Fonts

Nutzen Sie den Heroku Google Webfonts Helper um die notwendigen Font-Dateien zu laden und das CSS zu erzeugen. Sie benötigen nun die Liste, welche Sie zu Beginn erstellt haben.
Suchen Sie jeden verwendeten Font einzeln aus der Liste, klicken Sie die benötigten „Charsets“ an, wählen die gewünschten und genutzten Schnitte (Styles) aus.

Nun suchen Sie unterhalb der CSS Darstellung das Eingabefeld für den Ordnernamen, dieses ist beschriftet mit „Customize folder prefix (optional):„. Hier tragen Sie nun „fonts/“ ein, passend zur Struktur des kleinen Plugins.

Heroku Google Webfonts Helper

Wenn das erledigt ist, kopieren Sie den Code bei „3. Copy CSS“ und fügen diesen in die fonts.css des Plugins ein. Anschließend laden Sie die eigentlichen Font-Dateien herunter. Der Download Button befindet sich unter dem Feld mit den CSS Angaben.

Die Font-Dateien müssen nun entpackt und in den Ordner „/fonts/“ des Plugins hochgeladen werden.

Diese Schritte müssen Sie für jeden Google Font wiederholen, welchen Sie in WordPress aktuell verwenden oder künftig verwenden möchten. Sollten Sie in Ihrem Page-Builder irgendwann einen Font ändern, so müssen Sie diesen Schritt ebenfalls immer erneut manuell durchgehen und die Fonts anpassen.

Falls Ihnen diese manuellen Schritte zu viel Arbeit sind und vor allem zu unflexibel, so testen Sie gerne unser Plugin „Automatic Google Fonts Embedder“ oder für das Divi-Theme „Divi DSGVO & Google Fonts„, dieses führt all diese Schritte automatisch durch und überwacht die Divi-Webseite auf geänderte Schriften und lädt diese automatisch herunter.

Benötigen Sie Hilfe beim Thema Google Fonts?

Falls Sie beim Thema Google Fonts lokal und DSGVO-konform integrieren noch Unterstützung benötigen, sprechen Sie uns gerne an. Wir sind Ihnen gerne bei der Umstellung und Anpassung Ihrer WordPress-Webseite behilflich.

Nehmen Sie einfach Kontakt zu uns auf. Wenn Sie mehr über uns erfahren möchten, werden Sie auf unserem Agentur-Profil fündig.

Empfohlene Beiträge

Bajorat Media hat 4,7 von 5 Sternen | 153 Bewertungen auf ProvenExpert.com
Bajorat Media Bajorat Media ist eine überregionale Full-Service Web- & Online-Marketing Agentur mit Spezialisierung auf WordPress.