Google Fonts in Divi richtig verwenden: Ein vollständiger Leitfaden
Divi ist eines der beliebtesten WordPress-Themes und Page Builder, das von Elegant Themes entwickelt wurde. Mit seiner benutzerfreundlichen Oberfläche, den leistungsstarken Designmöglichkeiten und den unzähligen Anpassungsoptionen hat sich Divi bei Webdesignern und Entwicklern einen hervorragenden Ruf erarbeitet. Ein wichtiger Bestandteil von Divi ist die Verwendung von Google Fonts, um Texte auf deiner Website zu gestalten. Allerdings gibt es einige wichtige Überlegungen bezüglich der Datenschutzbestimmungen, besonders im Hinblick auf die DSGVO (Datenschutz-Grundverordnung), die du beachten solltest.
In diesem Blogbeitrag erklären wir dir, wie du Google Fonts mit Divi richtig einbindest, wie du sie lokal speicherst und warum es wichtig ist, sich mit den datenschutzrechtlichen Aspekten auseinanderzusetzen.
Warum Google Fonts in Divi verwenden?
Bevor wir uns mit der Implementierung von Google Fonts in Divi befassen, ist es wichtig, die Vorteile von Google Fonts zu verstehen. Google Fonts bietet eine breite Sammlung von Schriftarten, die einfach in Websites integriert werden können. Mit Google Fonts kannst du deine Website anpassen, indem du die Schriftarten nach deinem Designwunsch auswählst.
Die Vorteile von Google Fonts in Divi sind unter anderem:
- Vielfalt der Schriftarten: Google Fonts bietet Hunderte von kostenlosen Schriftarten, die du problemlos in deinem Divi-Design verwenden kannst.
- Einfache Implementierung: Die Integration von Google Fonts in Divi ist einfach und erfordert in der Regel keine umfangreichen technischen Kenntnisse.
- Ladegeschwindigkeit: Da Google Fonts auf den Servern von Google gehostet werden, ist der Zugriff auf diese Schriftarten schnell, was die Ladegeschwindigkeit der Seite verbessern kann.
Allerdings gibt es auch einige Herausforderungen, die du bei der Verwendung von Google Fonts in Divi berücksichtigen musst, insbesondere in Bezug auf die DSGVO und die externen Anfragen zu Google-Servern.
Warum Google Fonts lokal einbinden?
Obwohl Google Fonts praktisch und leicht zugänglich sind, gibt es datenschutzrechtliche Bedenken, wenn sie direkt von den Google-Servern geladen werden. Laut der Datenschutz-Grundverordnung (DSGVO) müssen Webseitenbetreiber sicherstellen, dass keine personenbezogenen Daten ohne Einwilligung des Nutzers übermittelt werden. Wenn du Google Fonts von den Google-Servern lädst, wird die IP-Adresse der Nutzer möglicherweise an Google übermittelt, was datenschutzrechtlich problematisch sein kann.
Um diesen Bedenken entgegenzuwirken und die DSGVO-Anforderungen zu erfüllen, kannst du Google Fonts lokal auf deinem Server speichern. Dadurch werden keine Daten an Google übermittelt, und du kannst sicherstellen, dass deine Website datenschutzkonform ist.
Wie man Google Fonts in Divi lokal speichert
Es gibt verschiedene Methoden, um Google Fonts lokal in Divi zu integrieren, sodass keine externen Anfragen zu Google-Servern erfolgen. Im Folgenden erklären wir dir, wie du Google Fonts lokal in Divi speichern kannst.
1. Google Fonts manuell herunterladen
Der erste Schritt ist, die gewünschten Google Fonts herunterzuladen und sie auf deinem Server zu speichern.
Schritt 1: Wähle die gewünschten Google Fonts aus
Gehe zur Google Fonts Website und wähle die Schriftarten aus, die du auf deiner Website verwenden möchtest. Achte darauf, dass du alle Schriftstile und -gewichte auswählst, die du auf deiner Website benötigst.
Schritt 2: Lade die Schriftarten herunter
Klicke auf den Button „Herunterladen“ und speichere die Schriftarten auf deinem Computer. Du erhältst eine ZIP-Datei, die alle benötigten Schriftdateien enthält.
Schritt 3: Lade die Schriftarten auf deinen Server hoch
Entpacke die ZIP-Datei und lade die Schriftdateien (z. B. .woff, .woff2, .ttf) auf deinen Webserver. Du kannst dies über den Dateimanager in deinem Hosting-Panel oder über ein FTP-Programm tun. Erstelle einen Ordner wie „/fonts“ in deinem WordPress-Verzeichnis, um die Schriftarten dort zu speichern.
Schritt 4: Verlinke die Schriftarten in deinem Divi-Theme
Nun musst du die Schriftarten in Divi einbinden. Gehe dazu zu „Divi“ > „Theme-Optionen“ und klicke auf den Tab „Benutzerdefiniertes CSS“. Füge folgenden Code ein, um die Schriftarten in dein CSS zu integrieren:
@font-face {
font-family: 'Roboto';
src: url('https://deine-website.de/wp-content/fonts/roboto.woff2') format('woff2'),
url('https://deine-website.de/wp-content/fonts/roboto.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Ersetze https://deine-website.de/wp-content/fonts/roboto.woff2 mit dem tatsächlichen Pfad zu den Schriftdateien, die du auf deinem Server hochgeladen hast. Wiederhole diesen Schritt für jede Schriftart, die du verwendest.
Schritt 5: Überprüfen der Schriftarten
Sobald du den Code eingefügt hast, speichere die Änderungen und lade deine Website neu. Überprüfe, ob die Schriftarten korrekt angezeigt werden und keine externen Aufrufe zu Google-Servern stattfinden.
2. Verwendung eines Plugins zur lokalen Speicherung von Google Fonts
Wenn du nicht manuell mit dem Code arbeiten möchtest, kannst du auch ein Plugin verwenden, um Google Fonts lokal zu speichern. Ein empfehlenswertes Plugin dafür ist „OMGF (Optimize My Google Fonts)“. Hier sind die Schritte zur Verwendung des Plugins:
Schritt 1: Plugin installieren
- Gehe zu deinem WordPress-Dashboard und navigiere zu „Plugins“ > „Installieren“.
- Suche nach „OMGF“ und installiere es.
- Aktiviere das Plugin.
Schritt 2: Google Fonts herunterladen und lokal speichern
- Gehe zu „OMGF“ in deinem WordPress-Dashboard.
- Das Plugin zeigt dir alle Google Fonts an, die auf deiner Website verwendet werden.
- Wähle die Schriftarten aus, die du lokal speichern möchtest, und klicke auf „Speichern“.
- Das Plugin lädt die Schriftarten herunter und speichert sie lokal auf deinem Server.
Schritt 3: Schriftarten in Divi aktivieren
Das Plugin wird die Schriftarten automatisch in deine Divi-Website integrieren, sodass keine externen Anfragen mehr an Google-Server gesendet werden. Du kannst deine Seite überprüfen, um sicherzustellen, dass die Google Fonts lokal geladen werden.
Vorteile der lokalen Speicherung von Google Fonts in Divi
- DSGVO-Konformität: Durch das lokale Speichern der Google Fonts werden keine personenbezogenen Daten (wie die IP-Adresse der Nutzer) an Google übermittelt, was sicherstellt, dass deine Website den Datenschutzbestimmungen entspricht.
- Bessere Ladegeschwindigkeit: Lokale Schriftarten können schneller geladen werden, da sie von deinem eigenen Server anstelle von externen Google-Servern geladen werden.
- Mehr Kontrolle: Du behältst die Kontrolle über die Schriftarten, die du auf deiner Website verwendest, und kannst sie jederzeit aktualisieren oder ändern, ohne auf externe Quellen angewiesen zu sein.
Fazit
Die Verwendung von Google Fonts in Divi ist eine großartige Möglichkeit, das Design deiner Website zu verbessern. Doch es gibt berechtigte Datenschutzbedenken, wenn Google Fonts direkt von Google-Servern geladen werden. Indem du Google Fonts lokal speicherst, kannst du sicherstellen, dass deine Website datenschutzkonform ist und gleichzeitig die Vorteile von Google Fonts nutzen.
Mit den oben beschriebenen Methoden – entweder manuell oder mit einem Plugin – kannst du Google Fonts sicher und effizient in Divi integrieren und deine Website so datenschutzfreundlich und leistungsstark wie möglich gestalten.
