Divi Google Fonts DSGVO: Datenschutzkonforme Typografie in WordPress

Das Divi-Theme von Elegant Themes gehört zu den meistgenutzten WordPress-Themes und überzeugt durch seine vielseitigen Designmöglichkeiten und einfache Bedienung. Ein wesentlicher Bestandteil eines gelungenen Webdesigns ist die Typografie – und hier kommen Google Fonts ins Spiel. Google Fonts bieten eine beeindruckende Auswahl an Schriftarten, die das Aussehen einer Website erheblich verbessern können. Allerdings führt die externe Einbindung von Google Fonts zu datenschutzrechtlichen Herausforderungen, insbesondere im Hinblick auf die Datenschutz-Grundverordnung (DSGVO). In diesem Beitrag erfährst du, warum Google Fonts ein sensibles Thema im Kontext der DSGVO sind, welche Risiken bestehen und wie du mit Divi und ein paar technischen Anpassungen für eine DSGVO-konforme Lösung sorgst.

1. Hintergrund: DSGVO und Google Fonts

Die Datenschutz-Grundverordnung (DSGVO) trat am 25. Mai 2018 in Kraft und hat die Art und Weise, wie personenbezogene Daten verarbeitet werden, grundlegend verändert. Einer der zentralen Aspekte der DSGVO ist, dass Daten – insbesondere sensible wie IP-Adressen – nur mit ausdrücklicher Zustimmung der Betroffenen verarbeitet werden dürfen. Beim Laden von Google Fonts über die Google-Server werden automatisch bestimmte Daten des Nutzers (z. B. die IP-Adresse) übermittelt. Auch wenn Google angibt, diese Daten nur zu statistischen Zwecken zu verwenden, bleibt die Tatsache bestehen, dass personenbezogene Informationen ohne ausdrückliche Zustimmung übertragen werden können.

Für Betreiber von Websites, die sich an europäische Nutzer richten, ist dies ein großes Risiko. Abmahnungen und Bußgelder stehen in Aussicht, wenn die DSGVO nicht eingehalten wird. Daher liegt der Fokus vieler Webdesigner darauf, Google Fonts so zu integrieren, dass keine externen Datenübertragungen stattfinden – und zwar am besten durch das lokale Hosting der Schriftarten.

2. Die Problematik der externen Einbindung von Google Fonts

2.1 Datenübertragung an Google

Standardmäßig werden Google Fonts direkt von den Servern von Google geladen. Dies bedeutet, dass bei jedem Seitenaufruf automatisch eine Anfrage an Google gesendet wird, wodurch Daten wie die IP-Adresse, Browserinformationen und andere technische Details übermittelt werden. Für die DSGVO ist das problematisch, da personenbezogene Daten ohne explizite Einwilligung verarbeitet werden.

2.2 Rechtliche Konsequenzen

In den letzten Jahren haben mehrere deutsche Gerichte entschieden, dass das Laden von Google Fonts von externen Servern datenschutzrechtliche Probleme mit sich bringt. Webseitenbetreiber sehen sich mit Abmahnungen und potenziell hohen Schadensersatzforderungen konfrontiert, wenn sie diese Praxis fortsetzen. Daher ist es unerlässlich, technische Maßnahmen zu ergreifen, um die Datenübertragung zu unterbinden.

2.3 Performance-Aspekte

Neben den rechtlichen Risiken kann das Laden von Ressourcen von externen Servern auch zu längeren Ladezeiten führen. Insbesondere bei hoher Besucherzahl oder in Regionen mit langsamer Internetverbindung kann dies die Performance der Website beeinträchtigen. Lokale Schriften reduzieren die Anzahl der externen HTTP-Requests und verbessern so die Ladegeschwindigkeit, was letztlich die User Experience und das SEO-Ranking positiv beeinflusst.

3. Lösungsansätze: Google Fonts lokal einbinden im Divi-Theme

Es gibt grundsätzlich zwei Ansätze, um Google Fonts datenschutzkonform in eine Divi-basierte WordPress-Website zu integrieren:

3.1 Google Fonts deaktivieren

Eine Möglichkeit besteht darin, Google Fonts vollständig zu deaktivieren. Dies ist sinnvoll, wenn du stattdessen andere, lokal gehostete Schriftarten verwenden möchtest. In Divi gibt es dafür oft Einstellungen, um externe Google Fonts auszuschalten. Falls dein Theme diese Option nicht bietet, kannst du über die functions.php deines Child-Themes entsprechende Code-Anpassungen vornehmen.

3.2 Google Fonts lokal einbinden

Alternativ kannst du Google Fonts weiterhin nutzen, indem du sie lokal auf deinem Server hostest. Dabei werden die Schriftdateien von deinem eigenen Server geladen, sodass keine Daten an Google übermittelt werden. Diese Methode bietet den Vorteil, dass du die gewünschte Typografie beibehältst, während du gleichzeitig DSGVO-konform arbeitest und die Performance deiner Website verbesserst.

4. Schritt-für-Schritt-Anleitung: Google Fonts lokal in Divi einbinden

Hier folgt eine detaillierte Anleitung, wie du Google Fonts lokal in dein Divi-Theme integrierst:

Schritt 1: Schriftarten mit Google Webfonts Helper herunterladen

Der Google Webfonts Helper ist ein nützliches Tool, um Google Fonts in den optimalen Formaten herunterzuladen:

1. Öffne Google Webfonts Helper.
2. Gib den Namen der gewünschten Schriftart (z. B. „Roboto“) in das Suchfeld ein.
3. Wähle die benötigten Schriftschnitte aus – etwa Regular, Bold und Italic. Es ist ratsam, nur die wirklich verwendeten Varianten auszuwählen, um die Dateigröße zu minimieren.
4. Aktiviere den „Modern Browsers“-Modus, damit die Schriftarten im WOFF- und WOFF2-Format heruntergeladen werden.
5. Klicke auf „Download“ und speichere das ZIP-Archiv auf deinem Computer.

Schritt 2: Schriftarten auf den eigenen Server hochladen

Nach dem Download musst du die Schriftarten in dein WordPress-Verzeichnis hochladen:

1. Entpacke das ZIP-Archiv: Auf deinem Computer erhältst du eine Sammlung von Schriftdateien und den zugehörigen CSS-Code.
2. Erstelle einen Ordner: Melde dich per FTP (z. B. mit FileZilla) oder über den Dateimanager deines Hosting-Providers an und navigiere zu wp-content/uploads/. Erstelle einen neuen Ordner, z. B. fonts oder google-fonts.
3. Lade die Schriftdateien hoch: Lade alle relevanten Dateien (vorzugsweise .woff und .woff2) in diesen Ordner hoch. Notiere dir den Pfad, da du diesen später im CSS-Code referenzieren musst.

Schritt 3: CSS-Code anpassen

Um die lokal gespeicherten Schriftarten in deine Website einzubinden, musst du den CSS-Code anpassen:

1. Öffne den Google Webfonts Helper CSS-Code: Der generierte CSS-Code enthält @font-face-Regeln, die standardmäßig auf die Google-Server verweisen.
2. Passe die URLs an: Ersetze die externen URLs durch den Pfad zu deinen lokal hochgeladenen Schriftdateien. Beispiel: @font-face { font-family: 'Roboto'; src: url('/wp-content/uploads/fonts/roboto-regular.woff2') format('woff2'), url('/wp-content/uploads/fonts/roboto-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
3. CSS einbinden: Füge den angepassten CSS-Code in den Customizer ein (Design > Customizer > Zusätzliches CSS) oder in die style.css deines Child-Themes.

Schritt 4: Integration in Divi

Nachdem du den CSS-Code angepasst und eingebunden hast, musst du sicherstellen, dass das Divi-Theme deine lokal eingebundenen Schriftarten verwendet:

1. Globale Typografie-Einstellungen: Gehe in deinem WordPress-Dashboard zu „Divi“ > „Theme-Optionen“ und navigiere zu den typografischen Einstellungen. Wähle dort den Namen der Schriftart (z. B. „Roboto“) aus, wie du ihn in deinem @font-face-Block definiert hast.
2. Modul-Spezifische Einstellungen: Falls du in bestimmten Divi-Modulen (z. B. Überschriften oder Textblöcken) andere Schriftarten verwenden möchtest, stelle sicher, dass du dort ebenfalls den richtigen Namen einträgst.

Schritt 5: Externe Google Fonts deaktivieren

Um sicherzugehen, dass keine externen Anfragen an Google erfolgen, solltest du alle externen Google Fonts vollständig deaktivieren:

1. Über Theme-Einstellungen: Einige Divi-Versionen bieten in den Theme-Optionen die Möglichkeit, Google Fonts zu deaktivieren. Suche nach einer entsprechenden Einstellung und aktiviere sie.
2. Manuelle Deaktivierung via functions.php: Falls dein Theme keine solche Option bietet, füge folgenden Code in die functions.php deines Child-Themes ein: function disable_divi_google_fonts() { wp_dequeue_style('divi-fonts'); wp_deregister_style('divi-fonts'); } add_action('wp_enqueue_scripts', 'disable_divi_google_fonts', 100);
3. Plugins nutzen: Alternativ gibt es Plugins wie „Disable Google Fonts“, die automatisch alle externen Google Fonts-Anfragen blockieren.

5. Zusätzliche Optimierungstipps

5.1 Font Subsetting

Das Font Subsetting hilft dabei, die Dateigröße der Schriftarten zu reduzieren. Dabei werden nur die Zeichen (Glyphen) in die Schriftdatei eingebunden, die tatsächlich auf deiner Website verwendet werden. Tools wie Font Squirrel oder Transfonter unterstützen dich bei diesem Prozess und optimieren die Schriftdateien.

5.2 Caching

Nutze ein Caching-Plugin wie „W3 Total Cache“ oder „WP Super Cache“, um sicherzustellen, dass die Schriftarten im Browser der Besucher zwischengespeichert werden. Dadurch müssen die Dateien nicht bei jedem Seitenaufruf neu geladen werden, was die Ladegeschwindigkeit weiter verbessert.

5.3 CDN-Einsatz

Falls du ein Content Delivery Network (CDN) nutzt, kannst du auch deine lokal gehosteten Schriftarten über das CDN ausliefern. Dies reduziert die Latenzzeiten, insbesondere für internationale Besucher, und verbessert insgesamt die Performance deiner Website.

6. Rechtliche Aspekte: DSGVO und Google Fonts

Die Datenschutz-Grundverordnung (DSGVO) schreibt vor, dass personenbezogene Daten nur mit Einwilligung verarbeitet werden dürfen. Externe Google Fonts übermitteln automatisch die IP-Adresse und weitere Browserinformationen an Google. Durch die lokale Einbindung dieser Schriftarten wird diese Datenübertragung vermieden, was die DSGVO-Konformität deiner Website erhöht.

6.1 Datenschutzerklärung anpassen

Stelle sicher, dass du in deiner Datenschutzerklärung genau erklärst, wie du Google Fonts lokal einbindest und dass keine Daten an Google übertragen werden. Transparenz schafft Vertrauen bei den Nutzern und schützt dich vor rechtlichen Konsequenzen.

6.2 Kontinuierliche Überprüfung

Datenschutz ist ein fortlaufender Prozess. Es ist ratsam, regelmäßig zu überprüfen, ob alle externen Aufrufe vollständig deaktiviert sind und ob deine lokale Implementierung noch den aktuellen gesetzlichen Anforderungen entspricht. Aktualisiere gegebenenfalls deine technischen Maßnahmen und Datenschutzerklärungen.

7. Zusammenfassung und Fazit

Die lokale Einbindung von Google Fonts in WordPress, insbesondere in Verbindung mit dem Divi-Theme oder Page Buildern wie Elementor, ist ein entscheidender Schritt zur Erreichung von DSGVO-Konformität und zur Optimierung der Performance deiner Website. Die Hauptvorteile liegen auf der Hand:

• Datenschutz: Keine externen Anfragen an Google bedeuten, dass keine personenbezogenen Daten ohne Zustimmung übertragen werden.
• Performance: Lokale Schriftarten verbessern die Ladegeschwindigkeit und bieten ein konsistentes Benutzererlebnis.
• Kontrolle: Du hast die volle Kontrolle über die Schriftarten, kannst sie optimieren und bist unabhängig von externen Änderungen oder Ausfällen.
• Rechtliche Sicherheit: Durch die Einhaltung der DSGVO minimierst du das Risiko von Abmahnungen und Bußgeldern.

Der Prozess umfasst mehrere wesentliche Schritte: Zuerst wählst du über Tools wie Google Webfonts Helper die gewünschten Schriftarten aus und lädst sie in den optimalen Formaten herunter. Anschließend lädst du diese Dateien auf deinen Server hoch, passt den CSS-Code an und bindest diesen in dein Theme ein. Danach stellst du sicher, dass externe Google Fonts deaktiviert werden – entweder durch Theme-Einstellungen, manuelle Code-Anpassungen in der functions.php oder mithilfe von Plugins. Abschließend können weitere Optimierungsmaßnahmen wie Font Subsetting, Caching und der Einsatz eines CDN die Ladezeiten weiter verbessern.

Insgesamt ist die lokale Einbindung von Google Fonts nicht nur ein technischer Vorteil, sondern auch ein rechtlich sinnvoller Schritt, um deine Website zukunftssicher zu machen. Datenschutz, Performance und Kontrolle gehen Hand in Hand und tragen dazu bei, dass deine Website nicht nur optisch ansprechend, sondern auch sicher und stabil ist.