Elementor ist eines der beliebtesten Page Builder Plugins für WordPress, das es Nutzern ermöglicht, ohne Programmierkenntnisse beeindruckende Webseiten zu erstellen. Ein wichtiger Bestandteil des Designs sind die Schriftarten. Viele Nutzer greifen auf Google Fonts zurück, um ihrer Webseite ein modernes Aussehen zu verleihen. Doch gerade im Hinblick auf die Datenschutz-Grundverordnung (DSGVO) ist es wichtig, dass Webseitenbetreiber sicherstellen, dass keine Daten ungewollt an Dritte übermittelt werden. Da Google Fonts standardmäßig über externe Server geladen werden, kann dies ein datenschutzrechtliches Risiko darstellen.

In diesem Blogbeitrag zeigen wir Ihnen, wie Sie Fonts in Elementor lokal einbinden können, um die DSGVO-Vorgaben zu erfüllen, die Ladegeschwindigkeit zu verbessern und vollständige Kontrolle über Ihre Web-Schriftarten zu haben.

Warum sollten Sie Elementor Fonts lokal einbinden?

Elementor und andere WordPress-Pagebuilder wie WPBakery oder Beaver Builder ermöglichen es Ihnen, Google Fonts einfach in Ihre Webseite zu integrieren. Das Problem dabei ist jedoch, dass diese Schriftarten standardmäßig von externen Servern, also von Google, geladen werden. Dies führt zu folgenden Herausforderungen:

1. DSGVO und Datenschutzrisiken: Google Fonts werden über externe Server geladen, was bedeutet, dass bei jedem Besuch auf Ihrer Website Daten an Google übermittelt werden. Dies kann gegen die Datenschutzbestimmungen der DSGVO verstoßen, da möglicherweise personenbezogene Daten an Server außerhalb der EU gesendet werden.
2. Ladegeschwindigkeit: Das Laden von Schriftarten von externen Servern kann die Ladegeschwindigkeit Ihrer Webseite negativ beeinflussen. Nutzer auf der ganzen Welt müssen auf die Google-Server zugreifen, was zu Verzögerungen führen kann, insbesondere in Regionen mit schlechter Internetanbindung.
3. Kontrolle über Ihre Ressourcen: Durch die lokale Speicherung von Schriftarten haben Sie die volle Kontrolle darüber, welche Schriftarten auf Ihrer Seite verwendet werden und können Änderungen schnell und einfach durchführen.

Wie lokalisiert man Elementor Fonts?

Das lokale Einbinden von Google Fonts in Elementor ist nicht kompliziert, erfordert aber einige technische Schritte. Hier sind die wichtigsten Schritte, um Ihre Schriftarten lokal auf Ihrer WordPress-Seite zu hosten und DSGVO-konform zu machen:

Schritt 1: Google Fonts herunterladen

Der erste Schritt ist das Herunterladen der Schriftarten, die Sie auf Ihrer Website verwenden möchten.

1. Besuchen Sie die Google Fonts Website (https://fonts.google.com/).
2. Wählen Sie die Schriftarten aus, die Sie verwenden möchten. Klicken Sie auf das „+“-Symbol neben der Schriftart, um sie Ihrer Auswahl hinzuzufügen.
3. Klicken Sie auf das „Auswahl anzeigen“-Banner am unteren Bildschirmrand.
4. Klicken Sie auf den Download-Button, um die Schriftarten als ZIP-Datei herunterzuladen.

Schritt 2: Schriftarten auf Ihren Server hochladen

Nun müssen die heruntergeladenen Schriftarten auf Ihren Webserver hochgeladen werden.

1. Verbinden Sie sich mit einem FTP-Client (z.B. FileZilla) oder verwenden Sie das cPanel Ihrer Website, um auf die Dateien Ihrer Website zuzugreifen.
2. Navigieren Sie zu wp-content/uploads/ und erstellen Sie einen neuen Ordner, der „fonts“ oder „google-fonts“ genannt wird.
3. Entpacken Sie die ZIP-Datei mit den Schriftarten und laden Sie alle Schriftart-Dateien (z.B. .woff, .woff2, .ttf) in diesen Ordner hoch.

Schritt 3: CSS-Datei für lokale Schriftarten erstellen

Nun müssen Sie eine CSS-Datei erstellen, die auf die lokal gespeicherten Schriftarten verweist. Diese Datei sorgt dafür, dass die Schriftarten korrekt auf Ihrer Webseite angezeigt werden.

1. Öffnen Sie die Datei style.css oder eine andere benutzerdefinierte CSS-Datei (die Sie später im Elementor verwenden können).
2. Fügen Sie den folgenden CSS-Code ein, um die Schriftarten zu definieren und sie mit den lokal gespeicherten Dateien zu verknüpfen:

@font-face {
    font-family: 'Roboto';
    src: url('https://www.ihre-website.de/wp-content/uploads/fonts/roboto.woff2') format('woff2'),
         url('https://www.ihre-website.de/wp-content/uploads/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/fonts/opensans.woff2') format('woff2'),
         url('https://www.ihre-website.de/wp-content/uploads/fonts/opensans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Passen Sie die URLs so an, dass sie auf den Ordner und die Schriftarten verweisen, die Sie auf Ihrem Server gespeichert haben.

Schritt 4: Schriftarten in Elementor einbinden

Nachdem Sie die Schriftarten auf Ihrem Server hochgeladen und in einer CSS-Datei definiert haben, müssen Sie sicherstellen, dass Elementor auf diese Schriftarten zugreifen kann.

1. Gehen Sie in Ihrem WordPress-Dashboard zu „Design“ > „Customizer“ > „Zusätzliches CSS“ und fügen Sie den oben genannten CSS-Code ein.
2. Alternativ können Sie Elementor’s benutzerdefinierte CSS-Optionen verwenden, wenn Sie diese in der Pro-Version von Elementor haben. Gehen Sie dazu zu „Elementor“ > „Einstellungen“ > „Erweitert“ und fügen Sie den CSS-Code unter „Benutzerdefiniertes CSS“ ein.

Schritt 5: Google Fonts im Elementor deaktivieren

Damit Elementor keine externen Google Fonts mehr lädt, müssen Sie sicherstellen, dass diese Option deaktiviert ist.

1. Wenn Sie das Standard-Elementor-Design verwenden, stellen Sie sicher, dass Sie die Google Fonts in den Elementor-Einstellungen deaktivieren.
2. Gehen Sie zu „Elementor“ > „Einstellungen“ > „Erweitert“.
3. Deaktivieren Sie die Option „Google Fonts laden“.

Wenn Sie dies tun, wird Elementor auf die lokalen Schriftarten zugreifen, die Sie in Ihrem CSS definiert haben, anstatt die Schriftarten von Google-Servern zu laden.

Schritt 6: Testen und Optimieren

Nachdem Sie die Schriftarten lokal eingebunden haben, ist es wichtig, Ihre Webseite zu testen, um sicherzustellen, dass sie wie gewünscht funktioniert.

1. Testen der Schriftarten:
   • Überprüfen Sie, ob die Schriftarten auf Ihrer Webseite korrekt angezeigt werden.
   • Testen Sie die Ladegeschwindigkeit Ihrer Webseite, um sicherzustellen, dass keine externen Verbindungen zu Google-Servern bestehen.
2. Verwenden Sie Entwicklertools:
   • Öffnen Sie die Entwicklertools Ihres Browsers (Rechtsklick > „Untersuchen“ > „Netzwerk“) und prüfen Sie, ob bei der Seitenladeanfrage Schriftarten von Google geladen werden. Wenn alles richtig funktioniert, sollten keine externen Schriftarten mehr geladen werden.

Schritt 7: Vorteile der lokalen Schriftart-Integration

Die lokale Einbindung von Schriftarten bietet mehrere Vorteile:

• DSGVO-Konformität: Durch das Vermeiden externer Datenaufrufe an Google-Servern schützen Sie die Daten Ihrer Benutzer und erfüllen die Anforderungen der DSGVO.
• Verbesserte Ladegeschwindigkeit: Das Laden von Schriftarten von einem lokalen Server ist oft schneller als das Laden von externen Quellen, was zu einer verbesserten Benutzererfahrung führt.
• Bessere Kontrolle: Sie haben mehr Kontrolle über Ihre Schriftarten und deren Versionen, da diese lokal auf Ihrem Server gespeichert sind.

Fazit

Die lokale Einbindung von Schriftarten in Elementor ist eine einfache, aber wirkungsvolle Methode, um sowohl die DSGVO-Konformität Ihrer Webseite zu gewährleisten als auch die Leistung Ihrer Seite zu optimieren. Während Elementor standardmäßig Google Fonts über externe Server lädt, können Sie durch das lokale Speichern dieser Schriftarten auf Ihrem eigenen Server nicht nur Datenschutzrisiken vermeiden, sondern auch die Ladegeschwindigkeit Ihrer Seite verbessern. Wenn Sie diesen Schritten folgen, stellen Sie sicher, dass Ihre Website sowohl technisch als auch rechtlich auf dem neuesten Stand ist.