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:
- 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.
- Schriftarten hochladen: Laden Sie die heruntergeladenen Schriftarten in das Verzeichnis Ihrer WordPress-Installation hoch, vorzugsweise in einen Ordner wie
/wp-content/uploads/fonts/
. - 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.
- Navigieren Sie im WordPress-Dashboard zu
- 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:
- Navigieren Sie im WordPress-Dashboard zu
Elementor
>Einstellungen
. - Wählen Sie den Tab
Erweitert
. - Wählen Sie im Dropdown-Menü
Google Fonts Laden
die gewünschte Methode aus. - 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:
- Gehen Sie zu
Elementor
>Einstellungen
im WordPress-Dashboard. - Wählen Sie den Tab
Erweitert
. - Setzen Sie die Option
Google Fonts
aufDeaktiviert
. - Speichern Sie die Änderungen.
Beachten Sie, dass durch das Deaktivieren von Google Fonts alle zuvor verwendeten Google-Schriftarten durch Standard-Schriftarten ersetzt werden.