Seit dem LG München Urteil vom 20.01.2022 haben meine beiden Video Tutorials zum Thema „Elementor und Google Fonts“ in den letzten Monaten viele neue Zuschauer gewonnen. In diesem Artikel fasse ich das Thema nochmal zusammen und gebe dir ein, zwei zusätzliche Tipps, die du bei der Integration der Google Schriften im Elementor beachten solltest. Selbstverständlich findest du in diesem Beitrag auch die beliebten Video Tutorials.
Disclaimer: Alle Informationen in diesem Beitrag sind wie immer nach bestem Gewissen recherchiert und beruhen auf meinen persönlichen Erfahrungen. Dieser Artikel sowie sonstige Inhalte auf dieser Website stellen keine Rechtsberatung dar und können den Rat eines Anwalts nicht ersetzen.
Google Schriftarten DSGVO-konform in Elementor einsetzen in 2 Schritten
Damit du die Google Schriftarten datenschutz-konform im Elementor einsetzen kannst, sind zwei Schritte erforderlich. Bevor wir uns jedoch die beiden Schritte ansehen, werfen wir einen Blick darauf, ob dir WordPress Plugins helfen können, die Datenschutz-Anforderungen bzgl. den Google Schriftarten zu erfüllen.
WordPress Plugins: Google Fonts DSGVO konform einsetzen
Es gibt verschiedene WordPress Plugins, die du versuchen kannst zu verwenden, um die Google Schriften datenschutz-konform auf deiner WordPress und Elementor Seite einzusetzen. Warum die Plugin-Methode nur selten zum Erfolg führt, erkläre ich in dem ersten Teil der Video Tutorial-Reihe. Wenn du dennoch ein Plugin ausprobieren möchtest, würde ich dir das Plugin Local Google Fonts empfehlen.
Auch wenn die Plugin-Methode funktioniert, du fügst wieder ein zusätzliches Plugin zu deiner Seite, welches du gerade als Elementor User nicht benötigst. Deshalb sehen wir uns nun die Variante ohne ein WordPress Plugin an.
Schritt 1: Verbindungen zum Google Server trennen
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Google Fonts & Elementor Teil 1 – Im 1. Teil des 2-teiligen Elementor Tutorials erfährst du, wie du die Verbindungen zum Google Server trennen und damit sicherstellen kannst, dass keine Daten an den Google Server übertragen werden.
Verbindungen zum Google Server überprüfen
Wie du überprüfen kannst, welche Verbindungen deine Website zu Google und anderen Servern aufbaut?
Dafür kannst du die Entwicklertools deines Lieblings-Browsers verwenden. Keine Angst, das ist nicht nur etwas für die Techies 🙂 Rufe deine Website auf, klicke die rechte Maustaste und wähle Untersuchen, Inspect, Inspect Element oder Ähnliches (abhängig vom Browser), um die Entwicklertools aufzurufen. Gehe dann zu dem Tab Network und klicke auf Fonts. Nach einem Refresh der Seite siehst du in der Spalte Domain zu welchen Server die Verbindungen aufgebaut werden.
Hier siehst du einen Screenshot aus Google Chrome:
Alternativ kannst du auch auf den Reiter Sources gehen. Dort funktioniert es auch ohne die Seite neu zu laden. Außerdem gibt es auch Online Tools wie z. B. der Google Fonts Checker, die überprüfen, ob deine Webseite Google Fonts verwendet. Wichtig zu wissen, es wird immer nur die eingegebene Unterseite geprüft. Soweit ich weiß, gibt es keine kostenlosen Tools, die alle Unterseiten deiner Website überprüfen. Falls du ein derartiges Tool kennst, hinterlasse bitte unten einen Kommentar.
WPC Tipp: YouTube Videos laden auch Google Fonts
Wenn du auf deiner Website Inhalte wie Google Maps oder YouTube Videos einbindest und diese nicht durch ein Consent Plugin wie z. B. Borlabs Cookie* ohne die Einwilligung des Besuchers beim Ladevorgang ausschließt, werden ebenfalls Google Fonts geladen. Das passiert auch, wenn du den „Privacy Mode“ beim Elementor Video Widget aktivierst.
Google Fonts in Elementor deaktivieren
Um die Verbindungen zu trennen und damit die Google Fonts, die über die API geladen werden, zu deaktivieren, kannst du als Elementor User einen Code Schnippet verwenden. Dieser Code Schnipsel wird in die functions.php Datei des Child Themes eingefügt:
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );
Dieser Code-Schnipsel funktioniert jedoch nur für Webseiten, die mit Elementor erstellt wurden. Falls du alle deine Unterseiten mit dem beliebtesten WordPress Page Builder aufgebaut hast, ist dieses Snippet eine gute Möglichkeit, nicht versehentlich wieder Google Fonts zu verwenden (beispielsweise wenn du vorgefertigte Elementor Templates importierst).
Vorsicht beim Importieren von Elementor Templates!
Solltest du vorgefertigte Elementor Vorlagen verwenden, kontrolliere immer die Einstellungen der Schriftfamilie. Denn bei vielen Templates sind bestimmte Google Fonts bereits voreingestellt. Ohne den oberen Code-Schnipsel würde deine Seite wieder die Verbindung zum Google Server aufbauen.
Sollte dein Webauftritt auch das Design des Themes verwenden (nicht Elementor Seiten), stelle sicher, dass du im Customizer keine Google Fonts ausgewählt hast.
Schritt 2: Google Fonts selbst hosten
Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren
Google Fonts & Elementor – Im 2. Teil erfährst du, wie du die Google Schriftarten mit Hilfe von Elementor Pro selbst hosten und damit datenschutz-konform einbinden kannst.
Google Schriftarten herunterladen
Zu allererst solltest du die Google Fonts, die du auf deiner Website verwenden möchtest bei Google herunterladen. Du kannst dafür auch die Seite gwfh.mranftl.com verwenden:
Heruntergeladene Google Fonts auf die eigene Website hochladen
Sobald du deine favorisierten Google Schriften lokal auf deinem Rechner gespeichert hast, kannst du sie unter Elementor > Benutzerdefinierte Schriftarten hochladen. Als letzten Schritt musst du nur noch die hochgeladenen Schriften für deine Elementor Designs verwenden. Am besten definierst du damit die globalen Einstellungen im Elementor Editor unter Website Einstellungen > Design-System bzw. unter Website-Einstellungen > Theme-Stil.
Fazit: Mit Aufwand verbunden aber mit Anleitung machbar
Wie du sehen kannst, ist ein gewisser Aufwand erforderlich, um die Verbindungen zum Google Server zu trennen und die Google Fonts DSGVO konform einzusetzen. Darüber hinaus gibt es noch weitere Stolperfallen, die zu berücksichtigen sind wie z. B. die Verwendung von Elementor Templates oder der Einsatz von eingebetteten Inhalten wie YouTube Videos. Ich hoffe jedoch, dass dir diese Anleitung hilft, den Datenschutz-Anforderungen gerecht zu werden und Abmahnungen zu vermeiden.
