Elementor lokal Google Fonts einbinden: Der ultimative Leitfaden für eine DSGVO-konforme Website

Elementor ist ein äußerst beliebtes Page Builder Plugin für WordPress, das es Nutzern ermöglicht, Webseiten durch Drag-and-Drop einfach zu gestalten. Ein wichtiger Bestandteil von Elementor sind die Google Fonts, die es Designern ermöglichen, ansprechende und moderne Schriftarten hinzuzufügen. Doch bei der Nutzung von Google Fonts in Europa gibt es ein Datenschutzproblem, das in den letzten Jahren durch die Datenschutz-Grundverordnung (DSGVO) noch relevanter geworden ist.

Die Nutzung von Google Fonts kann dazu führen, dass personenbezogene Daten wie die IP-Adresse des Nutzers an Google übermittelt werden, was in bestimmten Fällen gegen die DSGVO verstoßen kann. Daher ist es empfehlenswert, Google Fonts lokal auf dem eigenen Server zu speichern und zu verwenden. In diesem Beitrag erfahren Sie, wie Sie Google Fonts lokal in Elementor einbinden, um sowohl die DSGVO-Anforderungen zu erfüllen als auch die Ladegeschwindigkeit Ihrer Webseite zu optimieren.

Warum sollte man Google Fonts lokal in Elementor einbinden?

Die lokale Einbindung von Google Fonts bietet gleich mehrere Vorteile:

1. DSGVO-Konformität: Wenn Sie Google Fonts direkt von den Servern von Google laden, wird dabei automatisch die IP-Adresse des Nutzers an Google übermittelt. Dies kann problematisch werden, da dies eine Datenverarbeitung ohne die ausdrückliche Zustimmung des Nutzers darstellt. Durch das lokale Speichern der Google Fonts auf Ihrem Server vermeiden Sie diese Datenübertragung.
2. Bessere Ladezeiten: Wenn die Schriftarten lokal auf Ihrem Server gespeichert sind, werden sie nicht jedes Mal von einem externen Server geladen. Dies reduziert die Anzahl der Anfragen an externe Server und sorgt für eine schnellere Ladezeit Ihrer Webseite.
3. Mehr Kontrolle: Durch die lokale Speicherung können Sie sicherstellen, dass Sie immer die aktuellsten Versionen der Schriftarten verwenden, ohne sich auf externe Dienste verlassen zu müssen.
4. Zukunftssicherheit: Google könnte eines Tages seine Lizenzbedingungen ändern, und durch die lokale Speicherung sind Sie von externen Änderungen unabhängig.

Schritt 1: Google Fonts herunterladen

Der erste Schritt besteht darin, die gewünschten Google Fonts herunterzuladen. Hierbei können Sie entweder die komplette Schriftartbibliothek von Google herunterladen oder nur die spezifischen Schriftarten, die Sie für Ihre Webseite benötigen.

1. Besuchen Sie Google Fonts: Gehen Sie auf Google Fonts, um eine Auswahl an Schriftarten zu treffen.
2. Wählen Sie Ihre Schriftarten aus: Klicken Sie auf das „+“-Symbol neben jeder Schriftart, die Sie herunterladen möchten.
3. Download der Schriftarten: Nachdem Sie alle gewünschten Schriftarten ausgewählt haben, klicken Sie auf den Button „Auswahl anzeigen“ und dann auf „Download“ um die Schriftarten als ZIP-Datei herunterzuladen.

Schritt 2: Schriftarten auf den Server hochladen

Nachdem Sie die Schriftarten heruntergeladen haben, müssen Sie diese auf den Server Ihrer WordPress-Webseite hochladen. Dies kann entweder über FTP oder den cPanel-Dateimanager erfolgen.

1. Entpacken Sie die ZIP-Datei: Extrahieren Sie die Schriftartdateien aus der ZIP-Datei auf Ihrem Computer. Die wichtigsten Dateiformate, die Sie benötigen, sind .woff, .woff2 und .ttf.
2. Verbindung zum Server herstellen: Verwenden Sie einen FTP-Client (wie FileZilla) oder den cPanel-Dateimanager, um auf Ihren Webserver zuzugreifen.
3. Ordner erstellen und Dateien hochladen: Erstellen Sie im Verzeichnis wp-content/uploads/ einen neuen Ordner, z.B. „google-fonts“, und laden Sie alle entpackten Schriftartdateien in diesen Ordner hoch.

Schritt 3: CSS-Datei erstellen

Nun müssen Sie eine CSS-Datei erstellen, um die lokal gespeicherten Google Fonts in Ihre Webseite einzubinden. In dieser Datei wird definiert, wie die Schriftarten auf der Webseite geladen und angezeigt werden.

1. Erstellen Sie eine neue Datei mit dem Namen google-fonts.css oder fügen Sie den folgenden CSS-Code in Ihre bestehende style.css-Datei ein:

@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;
}

@font-face {
    font-family: 'Open Sans';
    src: url('https://www.ihre-website.de/wp-content/uploads/google-fonts/opensans.woff2') format('woff2'),
         url('https://www.ihre-website.de/wp-content/uploads/google-fonts/opensans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Passen Sie den Code entsprechend der Schriftarten an, die Sie auf Ihrer Webseite verwenden. Ersetzen Sie die URLs durch die tatsächlichen Pfade zu den Schriftartdateien, die Sie auf Ihren Server hochgeladen haben.

Schritt 4: Die CSS-Datei in Elementor einbinden

Jetzt müssen Sie die CSS-Datei in Ihre WordPress-Webseite einbinden. Dies können Sie auf verschiedene Arten tun.

1. Customizer verwenden:
   • Gehen Sie in Ihrem WordPress-Dashboard zu „Design“ > „Customizer“ > „Zusätzliches CSS“.
   • Fügen Sie den oben genannten CSS-Code in das Textfeld für benutzerdefiniertes CSS ein und klicken Sie auf „Veröffentlichen“.
2. Direkt in das Theme einfügen:
   • Öffnen Sie die Datei header.php Ihres WordPress-Themes und fügen Sie den folgenden Code innerhalb des <head>-Tags ein:

<link rel="stylesheet" href="https://www.ihre-website.de/wp-content/uploads/google-fonts/google-fonts.css">

Stellen Sie sicher, dass der Pfad korrekt zu Ihrer CSS-Datei zeigt.

Schritt 5: Google Fonts in Elementor deaktivieren

Um sicherzustellen, dass Elementor keine externen Google Fonts mehr lädt, müssen Sie die entsprechende Funktion in Elementor deaktivieren.

1. Öffnen Sie das „functions.php“-File Ihres WordPress-Themes (oder Child Themes).
2. Fügen Sie den folgenden Code hinzu, um die Google Fonts von Elementor zu entfernen:

function disable_elementor_google_fonts() {
    remove_action('wp_enqueue_scripts', [ \Elementor\Plugin::$instance->frontend, 'enqueue_google_fonts' ]);
}
add_action('wp_enqueue_scripts', 'disable_elementor_google_fonts', 20);

Dieser Code verhindert, dass Elementor Google Fonts von den Google-Servern lädt.

Schritt 6: Überprüfen Sie die Webseite

Nachdem Sie alle Änderungen vorgenommen haben, ist es wichtig, Ihre Webseite gründlich zu testen:

1. Testen Sie die Schriftarten: Überprüfen Sie, ob die lokal gespeicherten Schriftarten auf Ihrer Webseite korrekt angezeigt werden. Insbesondere sollten Sie sicherstellen, dass sie auf allen Geräten und in allen Browsern gut dargestellt werden.
2. Überprüfen Sie die Netzwerkverbindungen: Öffnen Sie die Entwicklertools Ihres Browsers (Rechtsklick auf die Seite > „Untersuchen“ > „Netzwerk“) und prüfen Sie, ob keine externen Verbindungen zu den Google-Servern bestehen.

Fazit

Die lokale Einbindung von Google Fonts in Elementor ist ein notwendiger Schritt, wenn Sie Ihre Webseite datenschutzkonform gemäß der DSGVO gestalten möchten. Durch die lokale Speicherung und Verwendung der Schriftarten können Sie nicht nur die Datenschutzbedenken hinsichtlich der Weitergabe von Nutzerdaten an Google umgehen, sondern auch die Ladegeschwindigkeit Ihrer Webseite verbessern. Befolgen Sie die oben genannten Schritte, um Google Fonts erfolgreich lokal in Elementor zu integrieren und eine bessere, DSGVO-konforme Benutzererfahrung zu bieten.