Datenschutz-Einverständnis

* Pflichtfeld

Google Fonts DSGVO-konform in Divi einbinden und lokal verwenden

Kategorie(n): Tipps & Tricks, Divi, DSGVO
Veröffentlicht am 6.06.2022
CS Webdesigns

Was dich in diesem Beitrag erwartet:

In diesem Guide zeige ich dir Schritt für Schritt, wie du Google Fonts in Divi DSGVO-konform verwenden kannst. Außerdem nenne ich dir Plugins zum Thema.

Google Fonts und die DSGVO: Warum du Schriftarten lokal hosten solltest

Wenn du dich ein wenig mit der DSGVO und dem TTDSG auseinandersetzt, wirst du mit Sicherheit darauf stoßen, dass auch die Verwendung von Google Fonts zum Datenaustausch mit den USA (Drittland im Bezug auf Datenschutz) führt und das ohne Einwilligung nicht datenschutzkonform ist.

Häufiges unbewusstes Problem ist häufig bereits das verwendete WordPress-Theme oder Plugin. Diese verwenden nicht selten Google Fonts als Schriftart. Das ist natürlich bequem, in Europa jedoch rechtswidrig. 

Einfachste und beste Lösung dagegen ist es, die Google Fonts in Divi lokal einzubinden, also auf dem eigenen Server speichern. Google Fonts lassen sich sehr einfach herunterladen und müssen dann nur noch korrekt eingebunden und verwendet werden. Das lässt sich in nur wenigen Schritten umsetzen. 

Wie du hierfür genau vorgehen musst, zeige ich dir jetzt Schritt für Schritt am Beispiel mit dem Theme „Divi“ von ElegantThemes

Warum sind Google Fonts nicht datenschutzkonform?

  • Übertragung der IP-Adresse (= personenbezog. Daten)
  • Einfache Lösung: Google Fonts lokal hosten bzw. verwenden

Google Fonts in Divi lokal hosten und einbinden – ohne Plugin

1. Download der gewünschten Google Font

Die Google Schriftarten stehen unter https://fonts.google.com kostenlos zum Download zur Verfügung.

Tipp: Verwende eine variable Schriftart, da diese – wie der Name vermuten lässt – in allen Varianten funktionieren. Wie du in dieser Auflistung siehst, sind die meisten Google Fonts variabel verfügbar.

Übrigens: Google hat mittlerweile auch Icons im Portfolio: https://fonts.google.com/icons.

2. Google Font bzw. Schriftarten in Divi hochladen

Divi macht es dir sehr einfach, eigene Schriftarten hochzuladen und diese dann global auf der Webseite zu verwenden.

Dafür musst du lediglich im Divi Builder bei einer beliebigen Seite in die Einstellungen eines Moduls navigieren und dort im Reiter Design den Umschalter „Text“ aufklappen. Dort findest du die Einstellung „Text Schriftart“ und kannst durch einen Klick auf „Hochladen“ eigene Schriftarten hochladen.

Variable Google Font in Divi hochladen

Dort wählst du nun die zuvor heruntergeladene Schriftart im tff- oder otf-Format aus, benennst sie mit dem wirklichen Namen und klickst auf hochladen.

Häufig erscheint hier folgende Fehlermeldung „Dateityp wird aus Sicherheitsgründen nicht unterstützt.“ oder „Dateityp aus Sicherheitsgründen unzulässig.„. Auch dafür gibt es eine einfache Lösung.

Unzulässiger Dateityp Upload

3. Lösung für das Problem „Dateityp unzulässig bzw. nicht unterstützt“

Um den Upload der Schriftart freizugeben musst du vorübergehend die wp-config.php in deinem WordPress-Verzeichnis um eine Codezeile erweitern.

Navigiere dazu über einen FTP-Client deiner Wahl (z.B. FileZilla), deinen Host (z.B. WP Space) oder WordPress-Plugin (z.B. WP Dateimanager) in das Hauptverzeichnis deiner WordPress-Installation und öffne die Datei wp-config.php (mit einem Editor wie z.B. Brackets).

Dort muss vorübergehend eine Zeile Code eingefügt werden:

define( 'ALLOW_UNFILTERED_UPLOADS', true);

Dieser Befehl erlaubt dir nun das Hochladen deiner Schriftarten, wie im vorherigen Absatz beschrieben. 

Nachdem du nun die Schriftart hochgeladen hast, lösche den Befehl wieder aus der wp-config.php!

4. Einfügen des CSS aus dem Google Webfontshelper

Nachdem die Google Schirftart auf deinem Server liegt, muss bei Google Fonts noch der dazugehörige CSS-Code in der style.css eingefügt werden. Keine Sorge, auch das ist nur copy & paste.

Wenn du die Schriftart wie beschrieben hochgeladen hast, findest du deine Schriftarten im folgenden Pfad deiner WP-Installation: /wp-content/uploads/et-fonts/

Diesen fügst du beim Google Webfontshelper bei „Customize folder prefix“ ein. Daraufhin setzt das Tool deinen Pfad in den CSS-Code und du musst dir diesen nur kopieren (Windows: STRG + C oder Mac: CMD + C).

Google Fonts Webhelper

Diesen Code müssen wir am Ende der Style.css einfügen und speichern. Wenn du ein Child Theme verwendest, füge ihn dort (wp-content/themes/child-theme-name) in die style.css ein. Verwendest du kein Child-Theme, füge das CSS im Haupttheme-Ordner /wp-content/themes/divi ein.

Das war es auch schon. Damit hast du deine Schriftart lokal eingebunden. Wenn du mehrere Schriftarten verwendest, wiederhole diesen Vorgang einfach.

5. Deaktiviere die Verwendung von Google Fonts in den Divi Theme-Optionen

Du kannst in den Divi-Einstellungen die Verwendung von Google Fonts direkt deaktivieren. Navigiere dazu in die Theme-Optionen – Allgemein und deaktiviere die Option „Google Schriftarten verwenden“.

Achtung, die Übersetzung ist ein wenig irreführend. „Deaktivieren“ darf hier als „Deaktiviert“ gelesen werden. Die Einstellung sollte also so aussehen:

Google Schriftarten in den Divi Einstellungen deaktivieren

6. Prüfe, ob deine Schriftarten wirklich lokal verwendet werden

Zu guter Letzt sollten wir abschließend prüfen, ob deine Seite auch wirklich nirgends mehr Google Fonts verwendet (Achtung: Teilweise verwenden Plugins Google Fonts. Viele Plugins wie MailPoet stellen dir das aber mittlerweile zur Auswahl.).

Dafür kannst du ein Tool wie www.e-recht24.de/google-fonts-scanner, Plugins wie im nächsten Kapitel beschrieben verwenden oder auch durch wenige Klicks manuell in den Entwicklertools deines Browsers.

Dafür solltest du deine Webseite im Inkognito- bzw. Privatmodus öffnen. Sobald die Seite geöffnet, gelangst du via Rechtsklick und Auswahl von „Durchsuchen“ oder noch einfacher, per F12-Taste in die Entwicklertools.

Dort findest du einen Reiter „Network“ und darunter die Auswahl „Font“. Dort werden dir alle Schriftarten angezeigt, die auf der aufgerufenen Website angezeigt werden. Achtung: Damit dir die Schriftarten angezeigt werden, musst du die Seite nochmal neu laden (F5-Taste).

Danach werden dir alle verwendeten Schriftarten aufgelistet. Hier sollte in der Spalte „Domain“ die eigene Domain stehen. Steht hier etwas anderes, musst du nochmal prüfen, wo diese Schriftart noch eingesetzt wird und dort ebenfalls die lokale Schriftart verwenden.

Lokale Verwendung der Google Fonts Schriftarten prüfen

Google Fonts lokal hosten mit Plugins

Ich persönlich versuche aufgrund von unterschiedlichen Gründen (Performance, Sicherheit, …) alle Anforderungen erstmal ohne Plugin zu lösen. Daher empfehle ich dir den manuellen Weg, den ich oben beschrieben habe.

Falls du dich damit nicht sicher oder wohl fühlst, kannst du es aber natürlich gerne mit einem Plugin umsetzen. Vor allem für „nicht-Spezialisten“, die vielleicht nicht jeden Tag mit WordPress zu tun haben, ist es eine reizvolle Möglichkeit.

Daher gebe ich dir hier 3 Plugin-Tipps zum Thema Google Fonts und der DSGVO.

Borlabs Fonts Blocker

Um nicht lokal geladenen Google Fonts entgültig den Hahn abzudrehen, kannst du den Font Blocker von Borlabs verwenden.

Sobald du es installiert und aktiviert hast, kappt das Plugin alle Verbindungen zu Google bezüglich deren Fonts. Lösche nach aktivieren vorsichtshalber den Cache deiner Website.

Das Plugin kannst du hier herunterladen: Borlabs Fonts Blocker.

OMGF – GDPR/DSVGO Compliant, Faster Google Fonts. Easy.

Vermutlich eines der bekanntesten Plugins zum Thema Google Fonts lokal einbinden. OMGF scannt deine Seite auf Google Fonts und speichert diese auf deinem Server ab. 

Das Plugin kannst du hier herunterladen: OMGF.

GDPRress – Eliminate external requests to increase GDPR compliance

Das Plugin GDPress ist noch relativ neu und unbekannt, aber von einem bekannten Entwickler in der WordPress-Welt. GDPress scannt deine Webseite auf Skripte und Stylesheet von Drittanbietern. 

Danach kannst du diese lokal auf deinem Server speichern, damit keine Anfragen von und zu externen Anbietern stattfinden.

Das Plugin kannst du hier herunterladen: GDPRS.

Was tun, wenn immer noch Google Fonts eingesetzt werden?

Wenn du nun immer noch Google Fonts auf deiner Wesbeite im Einsatz hast, kommen diese höchstwahrscheinlich über ein Plugin oder eingebundene Elemente.

Bekannte Plugins sind hier vor allem Google ReCAPTCHA, Newsletter-Tools wie ActiveCampaign, MailPoet oder Typeform. Immer häufiger bieten diese Anbieter den Einsatz lokaler Schriftarten. Dafür gibt es jeweils individuelle Vorgehen, die der Anbieter meist dokumentiert hat. Im schlimmsten Fall, wie bei Google reCAPTCHA, ist es nicht möglich. Hier gibt es nur eine Lösung: Umstieg auf DSGVO-konforme Alternativen. Bei Google reCAPTCHA empfehle ich WP Amour oder Honeypot.

Aber auch über sogenannte iFrames können Google Fonts auf deiner Seite zum Einsatz kommen. Wenn du z. B. Youtube Videos oder Google Maps eingebunden hast. Hier gibt es nur die Lösung des Content Blockers. Das heißt das Laden des iFrames wird erst nach der Einwilligung des Besuchers freigegeben. Hier sehe ich leider sehr häufig Fehler in der Implementierung. „Mein“ Cookie Consent Tool Borlabs Cookie bringt einen solchen Blocker mit und funktioniert zuverlässig.

Immer noch keine 100%-Lösung gefunden?

Natürlich hoffe ich, dass dir diese Anleitung dabei geholfen hat, deine Webseite bezogen auf Google Schriftarten DSGVO-konform zu gestalten.

Sollte das nicht der Fall sein oder du dafür auch einfach keine Zeit aufwenden kannst oder magst, sieh dir gerne meinen DSGVO-Check an oder melde dich bei mir.

Fazit

  • Die Verwendung von nicht lokal gespeicherten Google Fonts verstößt gegen die DSGVO & das TTDSG.
  • Einfache Problemlösung: Verwendung lokaler Google Fonts/Schriftarten.
  • Das bekannte "Dateityp nicht zulässig"-Problem lässt sich durch einen einzeiligen Code umgehen. Wichtig: Danach wieder rausnehmen!
  • Kontrolliere danach unbedingt, ob du auch wirklich nur noch lokale Schiftarten verwendest (auch Plugins!).
  • Für die DSGVO-konforme Verwendung von Google Fonts gibt es mittlerweile sehr gute Plugins.
  • Achtung bei bestimmten Plugins und iFrames.

Kommentare

10 Kommentare
  1. Sehr zugänglich erklärt und einfach zu Folgen.
    Vielen Dank, genau das was ich gesucht habe.

    Antworten
    • Vielen Dank für dein Feedback. Freut mich, wenn mein Beitrag dir geholfen hat!

      Antworten
  2. Besonders hilfreich fand ich deine detaillierte Erläuterung der Schritte, um die Google Fonts lokal zu speichern und sie über das eigene Server-Hosting einzubinden. Die Verwendung des Plugin XYZ und die Integration des entsprechenden Codes waren dabei besonders verständlich erklärt.

    Es ist großartig zu sehen, dass es Lösungen gibt, um die Ladezeit der Website zu verbessern und gleichzeitig die datenschutzrechtlichen Anforderungen zu erfüllen. Dein Beitrag hat mir dabei geholfen, ein besseres Verständnis dafür zu entwickeln, wie ich meine Website mit Divi und den lokal gehosteten Google Fonts optimieren kann.

    Vielen Dank für diese wertvollen Tipps und Anleitungen!

    Antworten
  3. Hallo,
    für mich hat die Anleitung schon zum zweiten Mal sehr gut geklappt.

    Beim zweiten Mal ist mir allerdings aufgefallen, dass der 4. Schritt scheinbar überflüssig erscheint.
    Möglicher Weise ist das abhängig von der eingebundenen Schrift oder davon ob bestimmte Abwandlungen (z.B. unterschiedliche Schriftstärken) genutzt wurden.
    Hast Du dazu nähere Infos?

    Antworten
    • Hi Samuel,

      freut mich, dass dir die Anleitung hilft.

      Bei deiner Frage vermutest du schon richtig, das hängt von der Schriftart ab. Welche war es, wo du es nicht benötigst hättest?

      Ich würde es vorsichtshalber immer einfügen.

      Antworten
  4. Danke für Deine Anleitung. hat sofort funktioniert!

    Antworten
    • Hi Doris,
      freut mich!

      Danke auch, dass du dir die Zeit für deinen positiven Kommentar genommen hast.

      Antworten
  5. Moin Christian,
    danke für deine Antwort. Die Idee mit dem Divi Cache war genau richtig! 🙂
    Mit dem http-Aufruf meinte ich, dass die Chrome Entwicklertools mir angezeigt hatten, dass die Schriftarten über eine http statt eine https Verbindung geladen würden. Ich habe das (bin Laie) darauf zurückgeführt, dass ich die Fonts über Web-FTP auf den Server geladen habe.

    Danke auch noch einmal für deinen Artikel!

    LG,
    Carsten

    Antworten
  6. Hi,
    mit der Anleitung konnte ich zwar die Google Fonts lokal einbinden, allerdings erfolgt der Aufruf der Fonts über einen http statt eines https request. Daraufhin habe ich überlegt, doch besser ein Plugin einzusetzen und habe die einzelnen Schritte wieder rückgängig gemacht (Fonts auf dem Server gelöscht, Eintrag in der style.css entfernt, im Customizer wieder auf Default Font umgestellt. Aber irgendwie haut das nicht hin, die Fonts werden jetzt immer noch lokal geladen. Cache Plugin habe ich deaktiviert. Was könnte da los sein???

    Antworten
    • Hi Carsten,

      was genau meinst du mit „Aufruf der Fonts über http“, wenn du die Schriftarten lokal eingebunden hast?

      Zu deiner Frage: Da bist du mit Cache vermutlich schon richtig unterwegs. Lösche auch mal den „Divi Cache“ –> Ordner „et-cache“ in wp-content und prüfe es nochmal.

      Ansonsten teile mir gerne die URL mit, dann schaue ich mal von Außen drauf.

      Viele Grüße
      Christian

      Antworten

Einen Kommentar abschicken

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