Elementor, Google Fonts und DSGVO – So machst du deine Website datenschutzkonform

Die Gestaltung moderner Websites steht heute nicht nur im Zeichen von ansprechendem Design und hoher Funktionalität. Datenschutz und rechtssichere Einbindungen spielen eine immer wichtigere Rolle – vor allem in Europa. Viele Content-Management-Systeme und Page Builder, wie Elementor, nutzen standardmäßig Google Fonts, um Websites typografisch aufzuwerten. Doch was passiert, wenn über diese dynamische Einbindung personenbezogene Daten (z. B. die IP-Adresse der Besucher) an Google übermittelt werden? In diesem Beitrag beleuchten wir, warum die Einbindung von Google Fonts problematisch sein kann, welche Konsequenzen sich aus der DSGVO ergeben und wie du Elementor datenschutzkonform gestalten kannst.

1. Der Hype um Google Fonts

Google Fonts sind eine beliebte Sammlung von Schriftarten, die kostenlos zur Verfügung stehen. Sie bieten Designern und Entwicklern hunderte Schriften, die sich einfach in Websites integrieren lassen. Insbesondere durch ihre einfache Einbindung via HTML-Link erfreuen sie sich großer Beliebtheit. Elementor, als einer der führenden Page Builder für WordPress, greift in seinen Designs häufig auf diese Fonts zurück – und zwar standardmäßig.

Doch genau diese einfache Integration birgt ein Risiko: Bei der dynamischen Einbindung werden beim Seitenaufruf automatisch Schriften von den Servern von Google geladen. Dabei werden häufig auch personenbezogene Daten, wie die IP-Adresse der Besucher, übertragen. Dies kann datenschutzrechtliche Probleme verursachen, da die Besucher nicht aktiv in diesen Datentransfer eingewilligt haben.

2. DSGVO und Google Fonts – Ein rechtlicher Überblick

Die Datenschutz-Grundverordnung (DSGVO) sieht vor, dass personenbezogene Daten nur mit Einwilligung des Nutzers oder aufgrund einer klaren Rechtsgrundlage verarbeitet werden dürfen. Wird durch den Aufruf von Google Fonts automatisch die IP-Adresse eines Besuchers an Google übertragen, fehlt oftmals die ausdrückliche Zustimmung.
Zudem haben Gerichtsurteile und Abmahnwellen gezeigt, dass diese Praxis in Deutschland und anderen EU-Ländern als datenschutzwidrig eingestuft werden kann. Webseitenbetreiber laufen somit Gefahr, Abmahnungen zu erhalten – und das kann im schlimmsten Fall hohe Kosten verursachen.

3. Google Fonts in Elementor – Standardmäßig aktiv

Elementor integriert Google Fonts, um Design und Typografie unkompliziert anzupassen. In den meisten Fällen erfolgt dies über ein einfaches HTML-Link-Tag im Header der Website. Diese Methode sorgt zwar für eine schnelle und einfache Einbindung, birgt aber den Nachteil, dass bei jedem Seitenaufruf Daten an die Google-Server gesendet werden.
Viele Webseitenbetreiber merken jedoch nicht, dass diese externe Kommunikation stattfindet. Dabei ist die rechtliche Lage klar: Ohne ausdrückliche Einwilligung des Nutzers verstößt diese Datenübertragung gegen die DSGVO.

4. DSGVO-konforme Alternativen: Lokales Hosting der Fonts

Um die datenschutzrechtlichen Probleme zu umgehen, empfehlen Experten, Google Fonts lokal auf dem eigenen Server zu hosten. Das bedeutet, dass du die benötigten Schriftdateien von Google herunterlädst, sie auf deinem eigenen Webserver ablegst und in Elementor so einbindest, dass keine externe Verbindung zu Google mehr hergestellt wird.
Die Vorteile dieser Methode liegen auf der Hand:

• Datenschutz: Es findet keine Übertragung personenbezogener Daten an Dritte statt.
• Performance: Lokale Fonts werden oft schneller geladen, da sie direkt von deinem Server abgerufen werden.
• Unabhängigkeit: Du bist nicht von der Verfügbarkeit und Ladezeiten externer Dienste abhängig.

5. Schritt-für-Schritt: Google Fonts lokal einbinden in Elementor

Schritt 1: Schriftart auswählen und herunterladen

Zunächst musst du festlegen, welche Google Fonts du auf deiner Website einsetzt. Nutze dazu beispielsweise das Addon „What Font?“ oder die Entwicklertools deines Browsers, um die verwendeten Schriften zu identifizieren.
Besuche anschließend Google Fonts und suche deine gewünschte Schriftart.

• Klicke auf die gewünschte Schrift und wähle „Download Family“.
• Entpacke die heruntergeladene ZIP-Datei auf deinem Computer.
• Achte darauf, dass du idealerweise die Formate WOFF oder WOFF2 verwendest, da diese für das Web optimiert sind.

Schritt 2: Schriftdateien auf den eigenen Server hochladen

Nachdem du die Fonts vorbereitet hast, musst du sie in dein WordPress-Theme integrieren. Hierbei hast du zwei Möglichkeiten:

Manuelle Einbindung:

• Lade die Schriftdateien per FTP in einen Ordner deines aktiven Themes, z. B. in einen Unterordner „fonts“.
• Achte darauf, dass die Dateipfade korrekt gesetzt werden und passe die CSS-Dateien deines Themes an, sodass die Schriftarten aus diesem Ordner geladen werden.

Plugin-Lösung:
Es gibt auch Plugins wie „Local Google Fonts“, die diesen Prozess automatisieren. Diese Plugins erkennen, welche Fonts auf der Seite genutzt werden, laden sie herunter und speichern sie lokal.

• Installiere ein entsprechendes Plugin über das WordPress-Plugin-Verzeichnis.
• Folge den Anweisungen des Plugins, um Google Fonts automatisch lokal zu hosten.
• Prüfe danach, ob alle Schriftarten von deinem eigenen Server geladen werden.

Schritt 3: Elementor so konfigurieren, dass lokale Fonts verwendet werden

Nachdem die Fonts lokal gespeichert wurden, musst du Elementor so einstellen, dass es diese anstelle der dynamischen Google Fonts verwendet.

• Öffne das WordPress-Backend und gehe zu den Elementor Einstellungen.
• Unter dem Reiter „Erweitert“ oder „Style“ kannst du in einigen Fällen festlegen, ob Elementor externe Fonts laden soll. Falls dort keine direkte Option vorhanden ist, sorgt das lokale Hosting – sofern die Schriftdateien in deinem Theme verankert sind – automatisch dafür, dass Elementor die lokal gehosteten Fonts verwendet.

Schritt 4: CSS-Anpassungen vornehmen

Um sicherzustellen, dass die lokal gespeicherten Schriftarten korrekt angewendet werden, musst du eventuell dein CSS anpassen.

• Öffne die style.css deines Child-Themes oder nutze den benutzerdefinierten CSS-Bereich in den WordPress-Customizer.
• Definiere den @font-face Block für deine Schriftart, zum Beispiel: @font-face { font-family: 'MeineEigeneFont'; src: url('/wp-content/themes/dein-child-theme/fonts/meineeigenefont.woff2') format('woff2'), url('/wp-content/themes/dein-child-theme/fonts/meineeigenefont.woff') format('woff'); font-weight: normal; font-style: normal; }
• Anschließend kannst du in deinen CSS-Regeln die Schriftart als Standard definieren: body { font-family: 'MeineEigeneFont', sans-serif; }

Diese Anpassungen sorgen dafür, dass Elementor und dein Theme die lokal gehostete Schrift verwenden und keine Verbindung mehr zu Google hergestellt wird.

Schritt 5: Testen und Kontrolle

Zum Abschluss solltest du überprüfen, ob deine Änderungen wirksam sind und keine unerwünschten Verbindungen zu Google bestehen.

• Öffne deine Website in einem Inkognito-Fenster (z. B. in Google Chrome).
• Nutze die Entwicklertools (F12) und schaue im „Network“- oder „Sources“-Tab nach, ob Schriften von domains wie „fonts.googleapis.com“ oder „fonts.gstatic.com“ geladen werden.
• Falls alle Schriftdateien von deiner eigenen Domain abgerufen werden, war der Umstellungsprozess erfolgreich.

6. Mögliche Stolpersteine und Lösungsansätze

Bei der Umstellung auf lokale Fonts können einige Herausforderungen auftreten:

• Upload-Probleme: WordPress blockiert standardmäßig den Upload bestimmter Dateitypen. In diesem Fall kannst du temporär den folgenden Code in deiner wp-config.php einfügen: define('ALLOW_UNFILTERED_UPLOADS', true); Vergiss nicht, diesen Eintrag nach dem Upload wieder zu entfernen.
• Caching: Sollten die Änderungen nicht sofort sichtbar sein, leere den Cache deines Browsers sowie deines WordPress-Caching-Plugins.
• Kompatibilität: Achte darauf, dass du ein Child-Theme nutzt, um bei zukünftigen Theme-Updates keine Änderungen zu verlieren.
• Responsive Design: Teste die Darstellung auf verschiedenen Geräten, um sicherzustellen, dass die Schrift auf Desktop, Tablet und Smartphone optimal lesbar ist.

7. Fazit

Die Integration von Google Fonts ist im Standardmodus eine schnelle und einfache Möglichkeit, um eine Website typografisch aufzuwerten. Doch aus datenschutzrechtlicher Sicht – gerade im Kontext der DSGVO – ist die dynamische Einbindung problematisch. Elementor setzt standardmäßig auf Google Fonts, was zu einer automatischen Datenübertragung an Google führen kann. Dies birgt das Risiko von Abmahnungen und rechtlichen Auseinandersetzungen.

Die Lösung liegt darin, Google Fonts lokal zu hosten. Indem du die benötigten Schriftarten von Google herunterlädst, auf deinen eigenen Server hochlädst und Elementor so konfigurierst, dass diese lokal abgerufen werden, schaffst du eine DSGVO-konforme Alternative. Neben dem Datenschutz spielt auch die Performance eine wichtige Rolle: Lokale Fonts werden oft schneller geladen, was zu einer besseren Nutzererfahrung und einem verbesserten SEO-Ranking führen kann.

Ob du nun den manuellen Weg gehst und dein Child-Theme direkt anpasst oder auf ein Plugin wie „Local Google Fonts“ zurückgreifst – beide Methoden bieten eine verlässliche Lösung, um externe Datenübertragungen zu vermeiden und deine Website unabhängig von Drittanbietern zu machen. Wichtig ist, dass du den gesamten Prozess sorgfältig testest und sicherstellst, dass in den Entwicklertools keine Verbindungen mehr zu Google-Servern sichtbar sind.

Mit diesen Maßnahmen machst du nicht nur deine Website datenschutzkonform, sondern hebst auch dein individuelles Webdesign hervor – ganz nach deinen Vorstellungen und im Einklang mit den aktuellen rechtlichen Anforderungen.