Divi Google Fonts lokal einbinden DSGVO konform

Sie brauchen Hilfe mit Ihrer Website? Buchen Sie jetzt Ihren preisgünstigen Webdesigner, schon ab 200€.

Links zu Drittanbietern sind Partnerlinks. Wir erhalten eine Provision bei qualifizierten Verkäufen.

Divi Google Fonts lokal einbinden DSGVO konform

von | Dez 5, 2022

Ist Divi DSGVO-konform?

Nein, das Divi Theme von Elegant Themes ist nicht mit der Datenschutz-Grundverordnung (DSGVO / GDPR) vereinbar. Bei Divi werden die Google Fonts extern von den Google Servern eingebunden und dabei wird die IP-Adresse des Nutzers an Google gegeben. Dies verstößt gegen die DSGVO und Sie können dadurch abgemahnt werden.

Wie mache ich Divi DSGVO-konform?

Um Divi DSGVO-konform zu machen, müssen Sie die Google Fonts in den Einstellungen von Divi deaktivieren und dann die Google Fonts über ein Plugin oder ein Child Theme lokal einbinden. Falls Sie Google Maps verwenden, brauchen Sie auch noch ein Cookie-Banner, der eine Abfragemaske vor dem Google Maps schaltet. Wir empfehlen als Cookie-Banner den Borlabs Cookie und falls Sie sich die Arbeit der lokalen Einbindung sparen wollen, empfehlen wir unsere Google Fonts DSGVO Plugins.

Im Folgenden nun die Schritte, wie Sie bei Divi die Google Fonts deaktivieren und dann lokal einbinden können.

Schritt 1) Deaktivieren Sie die Google Fonts in Divi

Sie können die Google Fonts in Ihrem Divi mit einem Klick deaktivieren, und zwar müssen Sie in Ihrem WordPress Dashboard unter Divi → Theme Options → Use Google Fonts → Disabled auswählen. Damit haben Sie bereits die Gefahr einer Abmahnung durch die Google Fonts von Divi beseitigt, angenommen, Sie haben keine anderen Plugins, die Google Fonts laden.

Wählen Sie unter Divi → Theme Options → Use Google Fonts → Disabled aus.

Schritt 2) Überprüfen Sie Ihre Website mit einem Google Fonts Checker

Wie weiß ich, ob ich Google Fonts verwende?

Um herauszufinden, ob Sie Google Fonts verwenden, können Sie mit Ihrem Chrome Browser einen Rechtsklick auf Ihre Website machen und dann auf „Untersuchen“ klicken. Es öffnet sich dann die Chrome-Dev-Tools und dort müssen Sie auf den Netzwerk-Tab klicken und dann die Seite neu laden. Sie sehen dann, ob Sie Datenverbindungen zu Google Servern aufbauen. Einmal zusammengefasst:

  1. Schritt 1: Steuerungstaste + Umschalttaste + i-Taste drücken
  2. Schritt 2: Chrome-Dev-Tools öffnen sich
  3. Schritt 3: Auf den Network-Tab klicken
  4. Schritt 4: Die Website aktualisieren
  5. Schritt 5: Rechtsklick auf den Spaltennamen und dann URL wählen
  6. Schritt 6: Datenaufrufe nach fonts.googleapis.com überprüfen

Falls das für Sie zu kompliziert ist, können Sie auch den folgenden werbefreien Google Fonts Checker benutzen. Geben Sie dort ein paar verschiedene Unterseiten ein, zum Beispiel auch die, auf der Sie Google Maps laden.

Sind Google Fonts DSGVO-konform?

Google Fonts sind normalerweise nicht DSGVO-konform, denn die Einbindung erfolgt oft über die Google Fonts Server. Google Fonts lassen sich aber DSGVO-konform verwenden, wenn sie lokal eingebunden werden, dazu muss man diese jedoch manuell auf den Server hochladen.

Ich habe Google Maps, wie kann ich jetzt die Google Fonts entfernen?

Wenn Sie Google Maps auf Ihrer Website verwenden, können Sie die Google Fonts nicht entfernen, da diese bei dem Aufruf der Google Maps Karte immer mitgeliefert werden. Sie müssen vor die Google Maps Karte eine Abfragemaske einbauen, sodass der Datenaufruf zu den Google Servern erst nach der Bestätigung des Nutzers erfolgt.

Hier sehen Sie ein Screenrecording von uns, wie wir Google Maps bei Divi einbauen.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Wir haben in dem Video den Borlabs Cookie Banner bereits installiert und er erkennt automatisch das Google Maps und baut die Abfragemaske sofort ein. Dieselbe Funktion ist Teil von allen gängigen Cookie Plugins. Wenn Sie ein Cookie Plugin bereits haben, dann kann es wahrscheinlich die Abfragemaske auch einbauen. Falls Sie nicht so gerne Videos schauen, haben wir die Schritte auch noch einmal mit Screenshots.

Schritt 3) Wählen Sie das Code-Modul im Divi Builder aus

In dem Divi Builder müssen Sie das Code-Modul auswählen und nicht das Google Maps Modul. Das Google Maps Modul von Divi ist schwerer zu bedienen, da Sie dort zuerst einen API-Schlüssel brauchen und es ist aufwendig den zu besorgen. Über das Code-Modul können Sie Google Maps deutlich schneller einrichten und der Borlabs Cookie erkennt das problemlos.

Schritt 4) Suchen Sie den Ort auf Google Maps und kopieren Sie den Link zum Einbetten

Im nächsten Schritt müssen Sie nach dem Ort, den Sie auf Ihrer Website anzeigen wollen, auf Google Maps suchen und dann den Link zum Einbetten rauskopieren. Sie finden ihn unter dem „Embed a map“-Tab.

Schritt 5) Fügen Sie den Google Maps Link in das Code Modul ein

Fügen Sie den Link in das Code-Modul ein und speichern Sie dann die Seite.

Das war es dann schon, die Abfragemaske sollte dann automatisch von Ihrem bisherigen Cookie-Banner Plugin angezeigt werden, in unserem Fall geht es problemlos mit dem Borlabs Cookie.

Wie binde ich Google Fonts lokal ein?

Um die Google Fonts lokal einzubinden, muss man sie im WOFF-Format von dem Google Webfonts Helper Tool herunterladen und dann in WordPress über ein Plugin oder ein Child-Theme einbinden. Dazu brauchen wir die Google Fonts im richtigen Format und ein Beispiel Plugin, das wir als Vorlage nehmen können.

Falls Sie sich die Arbeit nicht machen wollen, können Sie sich auch unsere Google Fonts Plugins anschauen.

Eine kurze Übersicht davon, welche Formate man lokal einbinden darf.

Welches Format der Google Fonts darf man lokal einbinden?

Font FormatVerwendung erlaubt?
TrueType Fonts (TTF)Nicht empfohlen
OpenType Fonts (OTF) Nicht empfohlen
Embedded OpenType Fonts (EOT)Nicht empfohlen
The Web Open Font Format (WOFF)Ja, empfohlen
The Web Open Font Format (WOFF 2.0) Ungeklärt

Bei den meisten Plugins, die man zum lokalen Einbinden der Google Fonts nehmen kann, wird oft nur das WOFF 2 Format eingebunden oder aber man bekommt die Möglichkeit alle möglichen Formate zu nehmen. Beide Herangehensweisen sind falsch, Sie können momentan nur das WOFF Format und dann höchstens in Kombination mit dem WOFF2-Format lokal einbinden. Das WOFF2-Format ist ein sehr modernes Format, welches sich noch in der Entwicklung befindet und momentan die originalen Metadaten nicht enthält. Laut der Open Font Lizenzseite ist nur das WOFF-Format vollkommen bestätigt.

WOFF

This format wraps up the original font in a layer of metadata, and the result is compressed. It has already been shown that FE can be preserved using this format.

WOFF2

This is an emerging revision and enhancement of the WOFF format, primarily to add a better compression scheme, The project is hosted at  http://code.google.com/p/font-compression-reference/ and is still in development, so a definitive judgment on FE is not possible. However, it is quite likely that FE can be preserved using this format.

https://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web_fonts_and_RFNs&highlight=woff2#bf99ba66

Bei dem WOFF2 Format müsste man im Grunde den Namen der Schrift ändern, da man sich nicht sicher sein kann, dass es sich wirklich um die angegebene Schrift handelt. In unserem Plugin haben wir genau die richtigen Formate eingebunden.

Wie Sie die Google Fonts lokal einbinden

In dem Rest des Tutorials erläutern wir Ihnen nun, wie Sie die Google Fonts lokal in Ihrem Divi mit dem richtigen Format einbinden können. Wir haben von dem Prozess ebenfalls ein Screenrecording gemacht. Vielleicht ist es sinnvoll, wenn Sie sich das Video zuerst einmal anschauen, damit Sie den Prozess schonmal gesehen haben. Falls Sie keine Lust auf ein Video haben, sehen Sie darunter auch dieselben Schritte wieder mit Screenshots.

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Zuerst einmal ein kurzer Überblick, wie wir die lokale Einbindung der Google Fonts umsetzen, wobei wir den ersten Schritt davon bereits gemacht haben.

Divi Google Fonts lokal einbinden in WordPress

  1. Schritt 1: Divi → Theme Options → Google Fonts deaktivieren.
  2. Schritt 2: Font bei Google Webfonts Helper auswählen.
  3. Schritt 3: Font mit der CSS-Datei auf WordPress hochladen.
  4. Schritt 4: CSS-Datei mit functions.php einbinden.
  5. Schritt 5: Überschriften und Paragrafen mit CSS zuordnen.

Schritt 1: Google Fonts in Divi deaktivieren

Falls Sie den ersten Schritt noch nicht gemacht haben, gehen Sie zu den Einstellungen von Divi unter: Divi → Theme Options → Use Google Fonts und deaktivieren Sie dort die Google Fonts.

Schritt 1: Google Fonts in Divi deaktivieren

Schritt 2: Auf Google Webfonts Helper die Schrift auswählen

Im nächsten Schritt wählen wir mit dem Google Webfonts Helper Tool die Schriftart aus, die wir auf unserer Website lokal installieren möchten.

Schritt 2: Auf Google Webfonts Helper die Schrift auswählen

Schritt 3: Wählen alle Schriftstärken aus

Wählen Sie im dritten Schritt alle Schriftstärken aus, denn die Schriften, die nicht gebraucht werden, werden auch nicht geladen.

Schritt 3: Wählen alle Schriftstärken aus

Schritt 4: Wähle den modernen Browser-Modus

Dieser Schritt ist wichtig, Sie können hier nur den modernen Browser-Modus auswählen, nur mit diesem Modus haben Sie die Google Fonts im korrekten WOFF und WOFF2-Format. Der Best-Support-Modus gibt die Schrift in einem falschen Format raus, dieses Format darf man nicht lokal einbinden.

Schritt 4: Wählen Sie den modernen Browser-Modus.

Schritt 5: Laden Sie das Google Fonts Beispiel Plugin runter

Zuerst müssen Sie die Schrift von der Google Webfonts Helper Seite herunterladen.

Schritt 5: Laden Sie das Google Fonts Beispiel Plugin runter.

Auf der Seite von news47ell wird ein Google Drive Link zu einem Beispiel Plugin angeboten. Laden Sie das Plugin ebenfalls runter.

Schritt 6: Ersetzen Sie Ihre Fonts und Ihr CSS in dem Plugin

Im nächsten Schritt müssen Sie lediglich das CSS, dass Sie auf der Google Webfonts Seite sehen, in das CSS von dem Beispiel Plugin kopieren und dann auch Ihre Fonts mit den Fonts in dem Plugin austauschen. Hier sehen Sie das CSS von dem Beispiel Plugin.

Sie finden es im Fonts Ordner von dem Beispiel Plugin. Dort kopieren Sie das CSS von der Google Webfonts Helper Website rein, es sollte dann so aussehen.

Als Letztes müssen Sie noch die Fonts von dem Beispiel Plugin mit den Fonts von der Google Webfonts Helper Seite austauschen.

Dann komprimieren Sie die Datei und dann laden Sie das Plugin in WordPress im WordPress-Dashboard hoch. Dadurch sind dann die Google Fonts lokal eingebunden und Sie sind fertig. Falls Ihnen das alles zuviel ist und Sie unser Plugin dafür nehmen wollen, finden Sie es hier.

Welche Schriften darf ich kommerziell nutzen?

Sie dürfen Google Fonts kommerziell verwenden, das wird von Google in den FAQ der Google Fonts Website offiziell bestätigt. Zu den Google Fonts gehören 1400 verschiedene Schriftfamilien und Sie dürfen alle von denen kommerziell nutzen, Sie müssen jedoch die Open Font Lizenz beachten.

Welche Daten verarbeitet Google Fonts?

Laut Google protokolliert die Google Fonts-API die Details der HTTP-Anfrage, dazu gehören der Zeitpunkt des Aufrufs der Google Fonts, von welcher URL die Google Fonts aufgerufen werden, was der Referrer der URL war und was der User-Agent-String des Nutzers ist.

Sind Googles Schriftarten ein Grund für 100 Euro Schadensersatz?

Ja, Sie können durch die externe Einbindung der Google Fonts von den Google Fonts Servern eine Abmahnung mit der Aufforderung eines Schmerzensgeldes in Höhe von 100 Euro erhalten. Das wurde das erste Mal im Januar dieses Jahres durch das Landgericht München verhängt.

Welche Vorteile hat das lokale Einbinden der Google Fonts?

Der Vorteil der lokalen Einbindung der Google Fonts ist, dass die IP-Adresse des Nutzers nicht an Google gegeben werden muss, um die Google Fonts darzustellen. Dadurch ist die Einbindung der Google Fonts datenschutzkonform und es kann zu keinen Abmahnungen kommen.

Links zu Drittanbietern sind Partnerlinks. Bei einem Produktkauf nach einem Klick auf meinen Link erhalte ich vom Hersteller Provision. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen. Das hat keinen Einfluss auf Ihren Preis. Ich empfehle nur Produkte, hinter denen ich auch wirklich stehe.

3 Kommentare

    • Das OMGF Plugin ist fürchterlich und einer der Hauptgründe wieso ich mein eigenes Plugin erstellt hab.

      Wenn man sich das OMGF Plugin im Detail anschaut gibt es viele Situationen wo es nicht richtig funktioniert und dadurch sogar die Gefahr einer Abmahnung bietet.

      Auch die Verkomplizierung mit dem Load und Unload Fonts macht keinen Sinn, es gibt nur eine richtige Einstellung, da muss dem Nutzer keine Frage gestellt werden.

      Deswegen ist die Sache mit unserem Plugin nach dem Aktivieren bereits erledigt, es gibt keine Entscheidung die von dem Nutzer getroffen werden müsste, die Aufgabe ist klar. Bei dem OMGF Plugin kann man viele unnötige Einstellungen vornehmen, das kann alles weg, das sind unwichtige Fragen.

      Antworten
      • Noch als Referenz auf der offiziellen Downloadseite heißt es: https://wordpress.org/plugins/host-webfonts-local/

        „After installing the plugin, OMGF will automatically start looking for Google Fonts whenever a page is requested on your website.“

        Das heißt nach dem Aktivieren funktioniert das Plugin noch gar nicht, zuerst müssen Nutzer noch die Google Fonts aktivieren durch das Aufrufen der Webseiten.

        Also die ersten Nutzer müssen erstmal in die Datenschutzfalle laufen und dann fängts an zu funktionieren.

        Nach Updates oder Cache Reinigungen können die Fonts auch schnell wieder verloren gehen, bei mir war es aber so, dass es die Google Fonts garnicht erst in das WordPress lokal geschafft haben.

        Das ist bei manchen Hostern geblockt und da funktioniert das Plugin garnicht, das kriegt die Google Fonts garnicht installiert, bei manchen Hostings.

        Es gibt einen Grund warum wir unser Plugin erstellt haben und der liegt darin, dass die verfügbaren Plugins einfach nicht richtig funktionieren.

        Das fällt manchen erst später auf aber nur unser Plugin funktioniert garantiert da die Google Fonts im Plugin installiert sind.

        Es gibt viele Hostings auf denen sogar Divi und Elementor komplett geblockt sind, Google Fonts extern zu laden funktioniert nicht immer, es gibt oft Mod Security Regeln die erstmal alle Serverseitigen externen Datenaufrufe jeder Art unterbinden, zum Beispiel namecheap hosting.

        Das heißt der Support vom Hosting muss dann das Plugin erstmal freischalten. Unser Plugin funktioniert in 100% der Fällen selbst beim härtesten Hosting überhaupt, das ist 100% Effektivität es verlässt sich nicht auf externe Datenaufrufe. Die Google Fonts sind garantiert lokal installiert nach dem Aktivieren, da gibt es kein Risiko.

        Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Studenten Webdesign

Sie brauchen Hilfe mit Ihrer Website? Buchen Sie jetzt Ihren preisgünstigen Webdesigner, schon ab 200€.

Links zu Drittanbietern sind Partnerlinks. Wir erhalten eine Provision bei qualifizierten Verkäufen.