Die Divi-Themes von Elegant Themes gehören zu den beliebtesten und leistungsfähigsten Page Buildern für WordPress. Mit Divi können Benutzer ganz einfach ansprechende Webseiten erstellen, ohne tiefgehende Programmierkenntnisse zu benötigen. Ein zentrales Design-Element sind Schriftarten, und viele Webseitenbetreiber nutzen Google Fonts, um ihren Seiten ein modernes und ansprechendes Aussehen zu verleihen. Doch die Verwendung von Google Fonts über externe Server wirft datenschutzrechtliche Bedenken auf, insbesondere im Hinblick auf die Datenschutz-Grundverordnung (DSGVO) in Europa.
In diesem Blogbeitrag zeigen wir Ihnen, wie Sie Google Fonts in Divi lokal einbinden können, um DSGVO-konform zu bleiben und gleichzeitig die Ladegeschwindigkeit Ihrer Webseite zu verbessern.
Warum sollten Sie Google Fonts lokal einbinden?
Google Fonts sind eine ausgezeichnete Ressource für Webdesigner, da sie eine breite Auswahl an freien und benutzerfreundlichen Schriftarten bieten. Allerdings gibt es beim Laden von Google Fonts von den Servern des Unternehmens einige potenzielle Datenschutzprobleme. Insbesondere, weil bei der Verwendung von Google Fonts automatisch eine Verbindung zu den Google-Servern hergestellt wird, wenn ein Nutzer eine Seite besucht. Diese Verbindung kann personenbezogene Daten, wie die IP-Adresse, an Google übermitteln – ein klarer Verstoß gegen die DSGVO, wenn keine ausdrückliche Zustimmung des Nutzers eingeholt wurde.
Durch das lokale Einbinden von Google Fonts vermeiden Sie diese Datenschutzrisiken und stellen sicher, dass Ihre Webseite keine personenbezogenen Daten an externe Server sendet. Zudem profitieren Sie von schnelleren Ladezeiten, da Schriftarten direkt vom eigenen Server geladen werden.
Schritt-für-Schritt-Anleitung: Google Fonts lokal in Divi einbinden
Die lokale Einbindung von Google Fonts in Divi ist nicht kompliziert, erfordert jedoch einige technische Schritte. Im Folgenden finden Sie eine detaillierte Anleitung, wie Sie Google Fonts lokal einbinden können.
Schritt 1: Google Fonts herunterladen
Der erste Schritt besteht darin, die Google Fonts von der Google Fonts Webseite herunterzuladen. Hierzu:
- Besuchen Sie die Google Fonts Webseite (https://fonts.google.com/).
- Wählen Sie die Schriftarten aus, die Sie verwenden möchten, indem Sie auf das „+“-Symbol neben der gewünschten Schriftart klicken.
- Nachdem Sie alle gewünschten Schriftarten ausgewählt haben, klicken Sie unten auf das „Auswahl anzeigen“-Banner.
- Klicken Sie auf den Download-Button, um die Schriftarten als ZIP-Datei herunterzuladen.
Schritt 2: Schriftarten auf Ihrem Server hochladen
Nachdem Sie die Schriftarten heruntergeladen haben, müssen Sie diese auf den Server Ihrer Webseite hochladen. Hierzu gehen Sie folgendermaßen vor:
- Entpacken Sie die ZIP-Datei auf Ihrem Computer.
- Verbinden Sie sich mit einem FTP-Client wie FileZilla oder verwenden Sie das cPanel Ihrer Webseite, um auf die Ordnerstruktur Ihrer Webseite zuzugreifen.
- Navigieren Sie zum Ordner
wp-content/uploads/und erstellen Sie einen neuen Ordner mit dem Namen „fonts“ oder „google-fonts“. - Laden Sie die entpackten Schriftart-Dateien (meist
.woff,.woff2,.ttf) in diesen Ordner hoch.
Schritt 3: Eine CSS-Datei erstellen
Nun müssen Sie eine CSS-Datei erstellen, um die lokal gespeicherten Schriftarten korrekt in Divi zu integrieren. Diese CSS-Datei enthält die Regeln, die Divi anweisen, die Schriftarten lokal zu laden.
- Öffnen Sie die Datei
style.cssoder erstellen Sie eine neue CSS-Datei. - Fügen Sie folgenden CSS-Code hinzu, um die Schriftarten korrekt zu definieren:
@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;
}
Stellen Sie sicher, dass Sie die URLs anpassen, sodass sie auf den Ordner und die Schriftarten auf Ihrem Server verweisen.
Schritt 4: CSS in Divi einfügen
Um die Schriftarten in Divi zu aktivieren, müssen Sie die CSS-Datei in das Divi-Design einfügen.
- Gehen Sie in Ihrem WordPress-Dashboard zu „Design“ > „Customizer“ > „Zusätzliches CSS“ und fügen Sie den oben angegebenen CSS-Code ein.
- Alternativ können Sie in Divi direkt unter „Divi“ > „Theme-Optionen“ > „Allgemein“ den CSS-Code im „Benutzerdefinierten CSS“ Bereich einfügen.
Schritt 5: Google Fonts in Divi deaktivieren
Damit Divi keine externen Google Fonts mehr lädt, müssen Sie sicherstellen, dass diese Funktion in den Divi-Einstellungen deaktiviert ist.
- Gehen Sie zu „Divi“ > „Theme-Optionen“.
- Klicken Sie auf den Tab „Builder“ und deaktivieren Sie die Option „Google Fonts laden“.
Dies stellt sicher, dass Divi nur noch auf die lokal gespeicherten Schriftarten zugreift und keine Google-Server mehr kontaktiert.
Schritt 6: Testen Sie die Implementierung
Nachdem Sie alle Änderungen vorgenommen haben, ist es wichtig, Ihre Webseite zu testen, um sicherzustellen, dass die Schriftarten korrekt angezeigt werden und keine externen Anfragen an Google gesendet werden.
- Überprüfen Sie, ob die Schriftarten lokal geladen werden: Verwenden Sie die Entwicklertools Ihres Browsers (Rechtsklick > „Untersuchen“ > „Netzwerk“), um sicherzustellen, dass keine externen Verbindungen zu Google-Servern bestehen.
- Testen Sie die Ladegeschwindigkeit: Überprüfen Sie mit einem Tool wie Google PageSpeed Insights, ob die Ladegeschwindigkeit Ihrer Seite verbessert wurde. Da die Schriftarten nun lokal gespeichert sind, sollten Sie eine Verbesserung der Ladegeschwindigkeit feststellen.
Schritt 7: Vorteile der lokalen Einbindung von Google Fonts
Die lokale Speicherung von Google Fonts bietet zahlreiche Vorteile:
- DSGVO-Konformität: Die lokale Speicherung von Schriftarten stellt sicher, dass keine Daten an Google übermittelt werden, was die Anforderungen der DSGVO erfüllt.
- Schnellere Ladezeiten: Lokale Schriftarten reduzieren die Ladezeit Ihrer Webseite, da keine externen Server kontaktiert werden müssen. Dies führt zu einer besseren Benutzererfahrung und verbessert das SEO-Ranking.
- Bessere Kontrolle: Sie haben die volle Kontrolle über die verwendeten Schriftarten und deren Versionen, da diese auf Ihrem eigenen Server gespeichert sind.
Fazit
Die lokale Einbindung von Google Fonts in Divi ist eine effektive Methode, um Ihre Webseite DSGVO-konform zu gestalten und gleichzeitig die Ladegeschwindigkeit zu verbessern. Durch die Schritte, die wir in diesem Artikel beschrieben haben, können Sie sicherstellen, dass Ihre Webseite die Datenschutzbestimmungen erfüllt und Ihre Nutzer nicht unnötig belastet werden. Wenn Sie Divi verwenden und Google Fonts lokal einbinden, haben Sie nicht nur mehr Kontrolle über das Design Ihrer Webseite, sondern bieten Ihren Besuchern auch eine sicherere und schnellere Benutzererfahrung.
