​Google Fonts sind ein integraler Bestandteil modernen Webdesigns und ermöglichen es, Websites mit ansprechender Typografie zu gestalten. Der Page Builder Elementor bietet umfangreiche Unterstützung für Google Fonts, was Designern und Entwicklern eine Vielzahl von Gestaltungsmöglichkeiten eröffnet. Allerdings gibt es sowohl technische als auch datenschutzrechtliche Aspekte, die bei der Verwendung von Google Fonts in Elementor berücksichtigt werden sollten. In diesem Beitrag beleuchten wir die Integration von Google Fonts in Elementor, diskutieren die Vor- und Nachteile und zeigen auf, wie man sie datenschutzkonform einbindet.​

Was sind Google Fonts?

Google Fonts ist ein interaktives Verzeichnis mit über 1.700 Schriftarten, das von Google zur freien Verwendung bereitgestellt wird. Diese Schriften können einfach in Websites eingebunden werden, um das visuelle Erscheinungsbild zu verbessern. Beliebte Schriftarten aus dieser Sammlung sind beispielsweise Roboto, Open Sans und Lato.

Integration von Google Fonts in Elementor

Elementor, als einer der führenden Page Builder für WordPress, ermöglicht es Nutzern, Google Fonts nahtlos in ihre Designs zu integrieren. Standardmäßig lädt Elementor die ausgewählten Schriftarten direkt von den Google-Servern. Dies hat den Vorteil, dass stets die aktuellsten Versionen der Schriftarten verwendet werden und der Implementierungsaufwand minimal ist. Allerdings kann diese Methode die Ladezeit der Website beeinflussen und datenschutzrechtliche Bedenken aufwerfen.​

Datenschutzrechtliche Bedenken bei der Nutzung von Google Fonts

Beim Laden von Schriftarten von externen Servern, wie denen von Google, werden automatisch bestimmte Daten des Nutzers, insbesondere die IP-Adresse, an den Server übermittelt. Laut der Datenschutz-Grundverordnung (DSGVO) gilt die IP-Adresse als personenbezogenes Datum. Das bedeutet, dass die Übermittlung ohne ausdrückliche Zustimmung des Nutzers problematisch sein kann. Ein Urteil des Landgerichts München I vom Januar 2022 bestätigte, dass die Einbindung von Google Fonts ohne Zustimmung des Nutzers gegen die DSGVO verstößt und Schadensersatzansprüche nach sich ziehen kann.

Lokale Einbindung von Google Fonts in Elementor

Um den datenschutzrechtlichen Anforderungen gerecht zu werden und die Ladezeiten der Website zu optimieren, empfiehlt es sich, Google Fonts lokal zu hosten. Das bedeutet, dass die Schriftarten direkt auf dem eigenen Server gespeichert und von dort geladen werden, anstatt sie von externen Servern zu beziehen.​

Schritte zur lokalen Einbindung:

1. Schriftarten herunterladen: Besuchen Sie die Google Fonts Website und laden Sie die gewünschten Schriftarten herunter. Achten Sie darauf, alle benötigten Schriftschnitte und -stile auszuwählen.​
2. Schriftarten hochladen: Laden Sie die heruntergeladenen Schriftarten in das Verzeichnis Ihrer WordPress-Installation hoch, vorzugsweise in einen Ordner wie /wp-content/uploads/fonts/.​
3. Einbindung in Elementor:
   • Navigieren Sie im WordPress-Dashboard zu Elementor > Custom Fonts
   • Klicken Sie auf „Neu hinzufügen“ und geben Sie einen Namen für die Schriftart ein.​
   • Fügen Sie die verschiedenen Schriftschnitte hinzu, indem Sie die entsprechenden Dateien hochladen und den Stil sowie das Gewicht festlegen.​
   • Speichern Sie die Einstellungen. ​
4. Verwendung der lokalen Schriftarten: Nach dem Hinzufügen der Schriftarten stehen diese in den Typografie-Einstellungen von Elementor zur Verfügung und können wie gewohnt ausgewählt werden.

Anpassung der Ladeeinstellungen für Google Fonts in Elementor

Elementor bietet die Möglichkeit, das Ladeverhalten von Google Fonts anzupassen, um die Performance der Website zu optimieren. Hierzu stehen verschiedene Ladeoptionen zur Verfügung:​

• Standard: Verwendet die Browsereinstellungen, um die Ladeweise zu bestimmen.​
• Blockierend: Verbirgt den Text, bis die Google Fonts vollständig geladen sind.
• Austausch: Zeigt den Text zunächst mit der Fallback-Schriftart an und wechselt zu den Google Fonts, sobald diese geladen sind.​
• Fallback: Verwendet zunächst die Fallback-Schriftart und tauscht sie aus, sobald die benutzerdefinierte Schriftart verfügbar ist.​
• Optional: Ähnlich wie „Auto“, aber der Browser kann sich entscheiden, die Fallback-Schriftart zu verwenden, anstatt auf das Laden der Google Fonts zu warten.

Um diese Einstellungen zu ändern, gehen Sie wie folgt vor:​

1. Navigieren Sie im WordPress-Dashboard zu Elementor > Einstellungen.​
2. Wählen Sie den Tab Erweitert.
3. Wählen Sie im Dropdown-Menü Google Fonts Laden die gewünschte Methode aus.​
4. Speichern Sie die Änderungen.

Deaktivierung von Google Fonts in Elementor

Falls Sie vollständig auf die Verwendung von Google Fonts verzichten möchten, bietet Elementor die Möglichkeit, diese zu deaktivieren:​

1. Gehen Sie zu Elementor > Einstellungen im WordPress-Dashboard.​
2. Wählen Sie den Tab Erweitert.​
3. Setzen Sie die Option Google Fonts auf Deaktiviert.​
4. Speichern Sie die Änderungen. ​

Beachten Sie, dass durch das Deaktivieren von Google Fonts alle zuvor verwendeten Google-Schriftarten durch Standard-Schriftarten ersetzt werden.