Elementor Google Fonts lokal einbinden: Der umfassende Leitfaden für eine DSGVO-konforme WordPress-Seite
Die Verwendung von Google Fonts auf einer Website kann das visuelle Design erheblich verbessern und dafür sorgen, dass Ihre Seite modern und ansprechend wirkt. Besonders im Elementor-Pagebuilder für WordPress ist das Hinzufügen und Anpassen von Google Fonts einfach und bietet Ihnen eine große Auswahl an Schriftarten, die Sie auf Ihrer Website verwenden können.
Jedoch gibt es dabei ein nicht zu unterschätzendes Problem, das in den letzten Jahren zunehmend an Bedeutung gewonnen hat: die DSGVO (Datenschutz-Grundverordnung). Wenn Sie Google Fonts direkt über die Google-Server einbinden, werden dabei personenbezogene Daten der Nutzer, wie etwa ihre IP-Adresse, an Google übertragen. Dies kann zu rechtlichen Problemen führen, da Google Fonts in vielen Fällen ohne ausdrückliche Zustimmung des Nutzers geladen werden. Dies könnte im Widerspruch zur DSGVO stehen.
In diesem Blogpost erklären wir, wie Sie Google Fonts in Elementor lokal einbinden, um den Datenschutz zu wahren und rechtlichen Problemen vorzubeugen. Wir zeigen Ihnen Schritt für Schritt, wie Sie dieses Problem lösen und Ihre Website DSGVO-konform machen können, ohne auf die Vorteile von Google Fonts verzichten zu müssen.
Warum Google Fonts lokal einbinden?
Google Fonts sind eine ausgezeichnete Möglichkeit, Ihre Website optisch ansprechend zu gestalten, ohne eine eigene Schriftart entwickeln oder lizenzieren zu müssen. Allerdings gibt es erhebliche Datenschutzbedenken, wenn Google Fonts über externe Server geladen werden. Jeder Aufruf von Google Fonts an den Google-Server sendet Informationen wie die IP-Adresse des Nutzers und andere technische Daten an Google. Dies erfolgt in der Regel ohne das Wissen oder die Zustimmung des Nutzers.
Für Websites, die auf den europäischen Markt abzielen, stellt dies ein Problem dar, da die DSGVO vorschreibt, dass personenbezogene Daten nur mit der ausdrücklichen Zustimmung des Nutzers verarbeitet werden dürfen. Das Laden von Google Fonts von externen Servern könnte daher zu rechtlichen Problemen und möglichen Abmahnungen führen.
Durch das lokale Hosten von Google Fonts vermeiden Sie diese Probleme. Sie laden die Schriftarten direkt auf Ihren eigenen Server und binden sie von dort in Ihre Website ein, wodurch keine Daten an Google übermittelt werden. Dies trägt dazu bei, die DSGVO-Anforderungen zu erfüllen und schützt sowohl Sie als auch Ihre Nutzer.
Wie man Google Fonts in Elementor lokal einbindet: Eine Schritt-für-Schritt-Anleitung
Die Einbindung von Google Fonts auf Ihrer Elementor-Website kann auf verschiedene Weisen erfolgen. Der einfachste Weg, Google Fonts lokal zu hosten, ist, sie herunterzuladen, auf Ihrem Server zu speichern und dann den CSS-Code entsprechend anzupassen. Hier ist eine detaillierte Anleitung, wie Sie Google Fonts lokal in Elementor einbinden können.
Schritt 1: Google Fonts auswählen und herunterladen
Der erste Schritt besteht darin, die Google Fonts auszuwählen, die Sie auf Ihrer Website verwenden möchten. Gehen Sie auf Google Fonts, suchen Sie sich die gewünschten Schriftarten aus und klicken Sie auf das Pluszeichen, um sie auszuwählen. Wenn Sie mehrere Schriftarten verwenden möchten, können Sie diese auch gleichzeitig auswählen.
Klicken Sie anschließend auf das „Auswahl anzeigen“-Fenster, um eine Übersicht der gewählten Schriftarten zu erhalten. Hier können Sie dann die Dateien in verschiedenen Formaten (wie WOFF und WOFF2) herunterladen. Stellen Sie sicher, dass Sie die richtigen Formate wählen, da diese für eine optimale Leistung und Kompatibilität auf Ihrer Website erforderlich sind.
Schritt 2: Schriftarten auf Ihren Server hochladen
Nachdem Sie die Schriftarten heruntergeladen haben, müssen Sie diese auf Ihren eigenen Server hochladen. Gehen Sie dazu im WordPress-Dashboard auf „Medien“ und dann auf „Datei hinzufügen“. Erstellen Sie einen neuen Ordner (zum Beispiel „google-fonts“) und laden Sie die Schriftarten-Dateien dort hoch.
Alternativ können Sie ein FTP-Programm wie FileZilla verwenden, um die Schriftarten in das Verzeichnis wp-content/uploads/ auf Ihrem Server zu übertragen. Dadurch stellen Sie sicher, dass die Schriftarten auf Ihrem eigenen Server gespeichert und nicht über externe Quellen geladen werden.
Schritt 3: CSS-Code anpassen
Um die Google Fonts von Ihrem Server anstatt von Google’s Servern zu laden, müssen Sie den CSS-Code anpassen. Dazu müssen Sie eine @font-face-Regel in Ihrem CSS hinzufügen.
Gehen Sie zu Design > Customizer > Zusätzliches CSS und fügen Sie den folgenden CSS-Code hinzu:
@font-face {
font-family: 'Roboto';
src: url('https://www.ihre-website.de/wp-content/uploads/google-fonts/roboto.woff2') format('woff2'),
url('https://www.ihre-website.de/wp-content/uploads/google-fonts/roboto.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Passen Sie den Pfad zu den Schriftarten-Dateien entsprechend an. Achten Sie darauf, dass der Pfad zur richtigen Datei führt und dass Sie das richtige Format (z. B. .woff oder .woff2) verwenden.
Schritt 4: Google Fonts in Elementor verwenden
Jetzt, da Sie die Schriftarten lokal eingebunden haben, können Sie diese in Elementor verwenden. Gehen Sie zu Elementor > Einstellungen und dann zum Tab Stile. Unter „Globale Einstellungen“ können Sie die Schriftarten für Ihre Website festlegen. Wählen Sie dort die Schriftarten aus, die Sie zuvor lokal eingebunden haben.
Wenn Sie eine bestimmte Schriftart in einem bestimmten Abschnitt oder Widget von Elementor verwenden möchten, können Sie dies auch direkt im Elementor-Editor tun. Wählen Sie das Widget aus, gehen Sie zu den Erweiterten Optionen und legen Sie die Schriftart für dieses Element fest.
Schritt 5: Testen Sie Ihre Website
Nachdem Sie die Schriftarten lokal eingebunden haben, besuchen Sie Ihre Website und überprüfen Sie, ob die Schriftarten korrekt angezeigt werden. Verwenden Sie die Entwicklertools Ihres Browsers (Rechtsklick auf die Seite > „Untersuchen“ > „Netzwerk“), um sicherzustellen, dass keine Anfragen an Google-Server gesendet werden. Wenn alles richtig funktioniert, sollten Ihre Schriftarten direkt von Ihrem Server geladen werden.
Alternativen zum manuellen Einbinden von Google Fonts
Es gibt auch Plugins, die Ihnen helfen können, Google Fonts lokal zu integrieren, ohne dass Sie die Schritte manuell durchführen müssen. Zwei beliebte Plugins, die dieses Problem lösen, sind:
- Google Fonts Local: Dieses Plugin lädt automatisch die benötigten Google Fonts herunter und speichert sie lokal auf Ihrem Server.
- OMGF (Optimize My Google Fonts): Ein weiteres Plugin, das Google Fonts lokal lädt und eine einfache Möglichkeit bietet, alle Fonts auf einmal zu optimieren.
Diese Plugins erleichtern die lokale Einbindung von Google Fonts, insbesondere wenn Sie mehrere Fonts verwenden oder wenn Sie keine technischen Kenntnisse haben.
Fazit
Die Verwendung von Google Fonts kann das Design Ihrer Website erheblich verbessern, jedoch sind datenschutzrechtliche Bedenken aufgrund der DSGVO zu beachten. Wenn Sie Google Fonts lokal einbinden, können Sie sicherstellen, dass keine personenbezogenen Daten an Google übertragen werden, was Ihre Website DSGVO-konform macht.
Durch das manuelle Einbinden der Schriftarten oder die Nutzung von Plugins können Sie sicherstellen, dass Sie die Vorteile von Google Fonts nutzen, ohne die Datenschutzvorschriften zu gefährden. Es ist zwar etwas mehr Aufwand als die einfache Einbindung der externen Fonts, aber der Schutz der Privatsphäre Ihrer Nutzer und die rechtliche Absicherung sind es auf jeden Fall wert.
