Divi Theme und Google Fonts: Wie Sie Google Fonts effektiv nutzen und DSGVO-konform einbinden
Das Divi Theme von Elegant Themes gehört zu den beliebtesten WordPress-Themes und bietet eine enorme Flexibilität beim Erstellen von Websites. Es ermöglicht Ihnen, visuell ansprechende Designs zu erstellen, ohne auf umfangreiche Programmierkenntnisse angewiesen zu sein. Ein großer Teil dieser Flexibilität ist der Zugang zu Google Fonts, einer Sammlung von über 900 Schriftarten, die kostenlos zur Verfügung gestellt werden.
Doch wie bei vielen externen Ressourcen, die auf einer Website eingebunden werden, wirft die Verwendung von Google Fonts Datenschutzbedenken auf, insbesondere in Bezug auf die Datenschutz-Grundverordnung (DSGVO) in Europa. Diese Bedenken entstehen vor allem durch die Tatsache, dass Google Fonts standardmäßig von externen Servern geladen werden, was dazu führt, dass personenbezogene Daten wie die IP-Adresse von Nutzern an Google übertragen werden – und das ohne deren ausdrückliche Zustimmung.
In diesem Blogpost erfahren Sie, wie Sie Google Fonts im Divi Theme verwenden können, dabei aber gleichzeitig sicherstellen, dass Ihre Website DSGVO-konform bleibt. Wir zeigen Ihnen, wie Sie Google Fonts lokal einbinden, die externen Verbindungen deaktivieren und somit sowohl den Datenschutz als auch die Ladegeschwindigkeit Ihrer Website verbessern.
Warum Google Fonts im Divi Theme verwenden?
Google Fonts bieten eine breite Auswahl an Schriftarten, die sowohl optisch ansprechend als auch einfach zu implementieren sind. Der größte Vorteil der Google Fonts ist die Tatsache, dass Sie keine Schriftarten auf Ihrem eigenen Server speichern müssen. Stattdessen werden sie über einen externen Server (Google-Server) geladen, was die Ladezeiten verkürzt und gleichzeitig die Leistung verbessert.
Im Divi Theme sind Google Fonts standardmäßig integriert. Dies bedeutet, dass Sie mit nur wenigen Klicks auf eine riesige Sammlung von Schriftarten zugreifen können. Allerdings gibt es einige Risiken, die mit der Verwendung von Google Fonts verbunden sind, insbesondere wenn es um den Datenschutz geht.
Warum Google Fonts DSGVO-Probleme verursachen können
Wenn Google Fonts über den externen Google-Server geladen werden, wird automatisch eine Anfrage an diesen Server gesendet. Dies hat zur Folge, dass personenbezogene Daten wie die IP-Adresse des Nutzers an Google übermittelt werden, was gegen die DSGVO verstoßen kann. Besonders in Europa ist dies ein kritisches Thema, da die DSGVO vorschreibt, dass personenbezogene Daten nur mit ausdrücklicher Zustimmung des Nutzers verarbeitet werden dürfen.
Die Verwendung von Google Fonts ohne eine solche Zustimmung kann zu Abmahnungen und rechtlichen Problemen führen. Daher ist es wichtig, dass Sie entweder die externe Einbindung von Google Fonts deaktivieren oder die Schriftarten lokal auf Ihrem Server hosten, um datenschutzrechtlichen Anforderungen gerecht zu werden.
Wie man Google Fonts im Divi Theme lokal einbindet
Glücklicherweise ist das Einbinden von Google Fonts lokal in Divi nicht besonders schwierig. In diesem Abschnitt zeigen wir Ihnen eine Schritt-für-Schritt-Anleitung, wie Sie Google Fonts lokal speichern und von dort aus in Ihrer Divi-Website verwenden können.
Schritt 1: Google Fonts auswählen
Zuerst müssen Sie die Schriftarten auswählen, die Sie auf Ihrer Website verwenden möchten. Gehen Sie auf die Google Fonts Website (https://fonts.google.com/) und wählen Sie die Schriftarten aus, die Ihnen gefallen. Wenn Sie mehrere Schriftarten verwenden möchten, klicken Sie auf das Pluszeichen neben jeder Schriftart, um sie zu Ihrer Auswahl hinzuzufügen.
Sobald Sie alle gewünschten Schriftarten ausgewählt haben, klicken Sie auf die Schaltfläche „Auswahl anzeigen“, die sich unten rechts auf der Seite befindet. Dort können Sie die benötigten Schriftarten-Dateien in verschiedenen Formaten (wie .woff und .woff2) herunterladen.
Schritt 2: Schriftarten auf Ihrem Server speichern
Nachdem Sie die Schriftarten heruntergeladen haben, müssen Sie diese auf Ihrem eigenen Server hochladen. Gehen Sie dazu in das Verzeichnis wp-content/uploads/ und erstellen Sie einen neuen Ordner für Ihre Schriftarten (z. B. „google-fonts“). Laden Sie die Schriftarten-Dateien in diesen Ordner hoch.
Schritt 3: CSS-Datei anpassen
Nachdem die Schriftarten-Dateien auf Ihrem Server gespeichert sind, müssen Sie die URLs in Ihrem CSS anpassen, damit die Schriftarten von Ihrem eigenen Server geladen werden. Dazu müssen Sie die CSS-Datei bearbeiten, die für das Styling Ihrer Website verantwortlich ist.
Öffnen Sie die Datei style.css (oder fügen Sie die Anpassungen in den benutzerdefinierten CSS-Bereich von Divi ein) und fügen Sie 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;
}
Ändern Sie den Pfad zu den Schriftarten, je nachdem, wo Sie diese auf Ihrem Server gespeichert haben. Stellen Sie sicher, dass Sie den richtigen Dateinamen und das Format verwenden.
Schritt 4: CSS in Divi einfügen
Um die benutzerdefinierte CSS-Datei in Divi zu integrieren, gehen Sie zu Divi > Theme-Optionen > Allgemein und fügen Sie Ihren CSS-Code im Abschnitt „Benutzerdefiniertes CSS“ ein. Speichern Sie die Änderungen.
Alternativ können Sie auch den Customizer verwenden, indem Sie zu Design > Customizer > Zusätzliches CSS gehen und dort den gleichen CSS-Code hinzufügen.
Schritt 5: Überprüfen Sie, ob alles funktioniert
Nachdem Sie die Google Fonts lokal eingebunden haben, besuchen Sie Ihre Website und prü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 die Google-Server gesendet werden.
Wie Sie externe Anfragen in Divi deaktivieren
Wenn Sie keine Google Fonts verwenden möchten, können Sie die externe Verbindung zu Google vollständig deaktivieren. In Divi gibt es eine einfache Möglichkeit, externe Schriftarten zu deaktivieren.
Schritt 1: Divi-Theme-Optionen öffnen
Gehen Sie zu Divi > Theme-Optionen in Ihrem WordPress-Dashboard.
Schritt 2: Externe Google Fonts deaktivieren
In den Divi-Theme-Optionen gibt es eine Einstellung, mit der Sie die Google Fonts deaktivieren können. Klicken Sie auf den Tab „Builder“ und suchen Sie nach der Option „Google Fonts deaktivieren“. Aktivieren Sie diese Option und speichern Sie die Änderungen.
Diese Einstellung verhindert, dass Divi Google Fonts über externe Server lädt. Wenn Sie jedoch weiterhin benutzerdefinierte Schriftarten verwenden möchten, müssen Sie diese wie oben beschrieben lokal einbinden.
Fazit
Die Verwendung von Google Fonts im Divi Theme kann sowohl eine ästhetische als auch eine technische Bereicherung für Ihre Website sein. Doch aufgrund der datenschutzrechtlichen Anforderungen, insbesondere im Hinblick auf die DSGVO, ist es entscheidend, dass Sie entweder Google Fonts lokal einbinden oder die externen Verbindungen deaktivieren, um personenbezogene Daten Ihrer Besucher zu schützen.
Indem Sie Google Fonts lokal einbinden oder auf andere Schriftarten umsteigen, können Sie sicherstellen, dass Ihre Website nicht nur optisch ansprechend, sondern auch datenschutzkonform bleibt. Denken Sie daran, dass die Einhaltung der DSGVO für die langfristige Sicherheit und den Erfolg Ihrer Website unerlässlich ist.
