Google Fonts DSVGO-konform einbinden mit WordPress und Elementor

Achtung Abmahnwelle: Eine einfache Anleitung wie du deine Schriftarten rechtssicher mit Wordpress und Elementor lokal einbinden kannst.

Inhalt

Sind Google Fonts DSGVO-konform?

Google Fonts sind nur dann rechtskonform, wenn sie lokal eingebunden sind. Werden sie dynamisch über eine Verbindung zu Google geladen, sind sie ohne Einwilligung des Besuchers datenschutzwidrig. Ob ein Cookie-Banner ausreicht, der das Laden der Schriften vor einer Zustimmung des Nutzers blockiert, ist noch unklar. Die einzige Möglichkeit, Google Fonts rechtskonform einzubinden, ist daher über eine lokale Einbindung der Schriftarten.

Das Gerichtsurteil des LG München entscheidet:

Schon länger befinden sich Webseitenbetreiber, die Google-Dienste verwenden, in der Grauzone. Sowohl Google Analytics als auch Google Fonts geben personenbezogene Daten an Google weiter. Seit Anfang des Jahres gibt es nun ein Gerichtsurteil, das mit einem Schadensersatz endete und in letzter Zeit zu einer Abmahnwelle führt.

Am 20.01.2022 hat das Landesgericht München entschieden: Webseiten dürfen die IP-Adressen von Besuchern nicht unerlaubt an Google weitergeben. Die Weitergabe stelle eine Verletzung des allgemeinen Persönlichkeitsrechtes dar und sei somit rechtswidrig. Bei der dynamischen Einbindung von Google Fonts werden IP-Adressen automatisch weitergegeben.

Abmahnwelle - Wie hoch ist die Schadensersatzsumme?

Das Landesgericht München hat dem Kläger einen Schadensersatz in Höhe von 100 Euro zugesprochen. Grund: individuelles Unwohlsein.

Aufgrund des Urteils bekommen Website-Betreiber nun vermehrt Mails in denen ein Schadensersatz in Höhe von 100 Euro verlangt wird. Da fast jede Website Google Fonts verwendet, scheint dies ein lukratives Geschäft zu sein. Wenn du eine eigene Website hast, ist das ärgerlich, denn es ist sehr einfach, die Anbindung an Google auf deiner Website zu verhindern und dir die Abmahnung zu ersparen.

Warum werden Google Fonts so gerne genutzt?

Google Fonts sind mittlerweile auf fast jeder Website eingebunden. Google bietet eine Bibliothek von über 900 Schriftarten, die lizenzfrei und kommerziell genutzt werden können. Die Einbindung ist simpel und auch Updates werden bei einer dynamischen Einbindung direkt übertragen. Die meisten WordPress Themes und Plugins bieten von bereits von Haus aus eine Anbindung an Google Fonts. Das ist praktisch, führt aber dazu, dass deine Website nicht DSGVO-konform ist. Du solltest die Verbindung zu Google unterbinden und die Schriftarten stattdessen lokal einbinden.

Test: Verwendet meine Website Google Fonts?

Ob deine Website Google Fonts verwendet, kannst du ganz einfach herausfinden. Öffne deine Website mit Chrome oder Firefox klicke mit der rechten Maustaste und wähle “Seitenquelltext anzeigen”.

Nun durchsuche den Quelltext mit der Tastenkombination Str + F nach den Begriffen “google” und “gstatic”. Wenn du dabei „fonts.googleapis.com“ oder „fonts.gstatic.com“ findest, bindet deine Website die Schriftarten dynamisch ein und leitet somit IP-Adressen an Google weiter. Dies kannst du nun für jede Unterseite testen. Da die Schriften meist global eingebunden sind, sollte deine Startseite schon ein gutes Indiz sein.

Wie kann ich Google Fonts rechtskonform verwenden?

Die einzige Möglichkeit, Google Fonts sicher zu verwenden, ist die lokale Einbindung der Schriftarten. Hierfür musst du die dynamische Anbindung an Google unterbinden, die Schriftarten einzeln herunterladen und sie dann auf deinem Server hochladen. Wenn du WordPress und z.B. Elementor nutzt, kannst du dies auch ganz einfach über die Backend-Benutzeroberfläche machen.

3 Schritte zur DSGO-konformen Verwendung:

  1. Schriftarten herunterladen
  2. Google Fonts auf deine Website hochladen
  3. Google Fonts deaktivieren

Im Folgenden erkläre ich dir, wie du diese Schritte ganz einfach mit WordPress und Elementor umsetzt.

1. Google Fonts herunterladen

Hierfür musst du zuerst herausfinden, welche Schriftarten du auf deinen Seiten verwendest. Wenn du mit Elementor arbeitest, solltest du deine Schriften global pflegen und kannst somit schnell herausfinden, welche Schriftarten du verwendest. Idealerweise hast du sowieso nur 2-3 Schriftarten auf deiner Seite. Ansonsten musst du die einzelnen Textelemente durchforsten.

Wenn du deine Schriftarten herausgesucht hast, suchst du die Fonts auf dieser Seite und lädst sie herunter. Dafür den Font-Namen eingeben (in meinem Beispiel “Rufina”), suchen, dann auf die Ergebnis-Kachel klicken und auf der Font-Seite, die sich öffnet, einmal “Download family” klicken:

Nach dem Download entpackst du die .zip-Datei auf deinem PC. In einem, manchmal auch mehreren Unterordner liegen nun die .ttf-Dateien ab. Das machst du nun mit allen deinen Schriftarten. Danach musst du die Schriftarten nur noch auf deine Website hochladen.

2. Google Fonts in Elementor hochladen und lokal einbinden

Die verschiedenen .ttf-Dateien enthalten verschiedene Varianten der Schrift (z.B. unterschiedliche Dicke der Schrift). Je nach Schriftart gibt es unterschiedlich viele Varianten, manchmal sogar nur eine einzige. Wir wollen nun alle Varianten hochladen und den richtigen Schriftschnitt-Werten, z.B. “500” zuordnen. Wenn es zu viele sind, kannst du natürlich auch nur die Schriftschnitte hochladen, die du tatsächlich verwendest.

Jetzt müssen wir erst herausfinden, welche Schriftschnitte die .ttf-Dateien haben, denn sie sind nur mit “Light”, “Bold”, etc. benannt. Die genauen Schriftschnitte findest du auf der Google-Font-Seite, wenn du etwas herunterscrollst:

Geh jetzt in deinem WordPress-Menü bei Elementor auf “Benutzerdefinierte Schriftarten” bzw. “Custom Fonts”. Füge eine neue hinzu mit “Add new”. Gib exakt den Namen der Schriftfamilie ein, die du dir vorhin gemerkt hast. Dann wähle eine Schriftstärke aus, mit der du beginnen willst, z.B. 300. Jetzt klickst du bei TTF Datei auf “hochladen” und lädst die entsprechende .ttf-Datei hoch. In diesem Falle ist es die “Light”. Wenn du weitere Varianten hast, klicke dann unten auf “Schriftart Variante hinzufügen” und füge eine weitere Variante hinzu. Wähle wieder die Schriftstörke aus und lade die Datei hoch. Wenn du alle Varianten hinzugefügt hast, klicke rechts auf “Veröffentlichen”!

Für die nächste Schriftart klickst du oben wieder auf “Add New” und lädst auch hier alle Varianten hoch. Wenn du auf jetzt im WordPress-Elementor-Menü wieder die Seite “Benutzerdefinierte Schriftarten” aufrufst, siehst du nun deine Schriftarten.

Elementor ist an dieser Stelle ziemlich genial und erkennt automatisch, dass du eigene Schriften hast. Trotzdem solltest du kontrollieren, ob es wirklich bei der Schriftfamilie deine eigene Schriftart unter “Eigene Schriften” verwendet. Falls nicht, musst du einmal händisch auswählen:

3. Google Fonts in WordPress deaktivieren

Um nun noch die dynamische Verbindung zu Google in WordPress zu unterbinden, musst du einen kleinen Code-Schnipsel in deine functions.php einfügen. Keine Angst, ich habe eine sehr einfache Lösung, wie du dies auch ohne technische Kenntnisse machen kannst. Kurze Erklärung: Die functions.php ist eine Datei, die mit jedem WordPress-Theme kommt. Über sie können Funktionen hinzugefügt oder Standardfunktionen geändert werden. Da die Datei mit jedem Theme-Update überschrieben wird, solltest du deine Änderung niemals direkt in die functions.php schreiben.

Es gibt zwei Möglichkeiten, wie du den Code-Schnipsel hinzufügen kannst:

  • Anlegen eines Child-Theme und Anpassung in dessen functions.php (eher für Fortgeschrittene WordPress-User)
  • Verwendung des Plugins Code Snippets (sehr einfach, siehe foglende Anleitung)

Google Fonts mit dem Plugin "Code Snippets" einfach deaktivieren

Hierfür installiere dir zunächst das Plugin Code Snippets. Mit dem Plugin kannst du Funktionen hinzufügen, ohne direkt in die functions.php schreiben zu müssen.

Das Plugin kannst du in der WordPress Plugin Bibliothek suchen und installieren. Nach der Aktivierung gehst du nun auf die Plugin-Einstellungsseite, die nun in deinem WordPress-Menü unter “Snippets” zu finden ist. Dann klickst du oben auf “Neu hinzufügen” und gibst folgenden Code ein:

				
					 add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
				
			

Jetzt kannst du dem Snippet noch einen Namen geben, zum Beispiel “Google Fonts deaktivieren”. Dann speichern und aktivieren nicht vergessen.

Jetzt kannst du noche einmal den Test machen, ob auf deiner Website Google Fonts geladen werden, siehe Anleitung weiter oben.

Weitere Vorteile Fonts lokal einzubinden

Deine Website ist erst rechtskonform, wenn deine Google Fonts ausschließlich lokal eingebunden sind. Aber es gibt noch einen weiteren Vorteil: Eine bessere Ladezeit. Ohne lokale Einbindung müssen die Schriften bei jedem Seitenaufruf erneut von Google geladen werden und verlangsamen somit deine Seiten. Durch den lokalen Aufruf kannst du also die Performanz deiner Seite verbessern.

Google Fonts in der Datenschutzerklärung

Du kannst in deiner Datenschutzerklärung erwähnen, dass du Google Fonts verwendest, hierdurch wird deine Website aber nicht DSGVO-konform. Die Rechtssicherheit hast du erst, wenn keine Fonts mehr über Google geladen werden und du deine Schriften stattdessen lokal auf deinem eigenen Server (der in Deutschland stehen sollte!) speicherst. Ich weise darauf hin, dass ich keine rechtlichen Fragen kläre, sondern nur Hinweise gebe. Für eine sichere rechtliche Absicherung wende dich bitte an einen Anwalt o.ä.

Kontaktformular

Ich empfehle diese Variante, wenn du relativ genau weißt, wie deine Website aussehen soll (eine oder mehrere Beispielseiten reichen hierfür auch) und dir auch mit deinen Inhalten recht klar bist – oder, wenn du recht anspruchslos bist und die Umsetzung in meine Hände geben möchtest.
Ansonsten erarbeite ich gerne für dich und mit dir ein schlüssiges, übersichtliches Konzept inkl. Designvorschlägen. Siehe hierzu mein Starter-Paket.