Google Fonts lokal einbinden in WordPress Divi – Ein umfassender Leitfaden

Das Divi-Theme von Elegant Themes ist eines der beliebtesten WordPress-Themes und wird von zahlreichen Webdesignern wegen seiner Flexibilität und intuitiven Bedienung geschätzt. Eine zentrale Komponente moderner Websites ist dabei die Typografie. Google Fonts bieten eine riesige Auswahl an hochwertigen Schriftarten, die das Erscheinungsbild einer Website entscheidend verbessern können. Doch während die externe Einbindung von Google Fonts technisch einfach ist, wirft sie insbesondere in der EU datenschutzrechtliche Fragen auf.

Die Datenschutz-Grundverordnung (DSGVO) verlangt, dass personenbezogene Daten, wie beispielsweise die IP-Adresse der Besucher, nur mit deren ausdrücklicher Zustimmung verarbeitet werden. Wird Google Fonts extern geladen, werden diese Daten automatisch an Google übermittelt – ein Vorgang, der rechtlich problematisch sein kann. Um diesem Problem zu begegnen, empfiehlt es sich, Google Fonts lokal zu hosten. In diesem Leitfaden zeigen wir dir Schritt für Schritt, wie du Google Fonts lokal in einer WordPress-Divi-Website einbindest und damit deine Seite datenschutzkonform gestaltest.

1. Warum Google Fonts lokal einbinden?

Datenschutz und DSGVO

Beim Laden von Google Fonts über externe Server werden Daten wie die IP-Adresse des Nutzers an Google übertragen. Auch wenn Google in seinen Datenschutzrichtlinien angibt, dass keine personenbezogenen Daten gespeichert werden, besteht dennoch das Risiko, dass diese Übertragung als Datenverarbeitung ohne Einwilligung gewertet wird. Für Webseitenbetreiber, die Besucher aus der EU empfangen, ist dies ein kritischer Punkt. Durch die lokale Einbindung der Google Fonts werden alle Schriftarten direkt von deinem eigenen Server geladen, sodass keine Daten an Google übermittelt werden. So wird die DSGVO-Konformität sichergestellt und Abmahnungen vorgebeugt.

Performance und Ladezeiten

Ein weiterer Vorteil der lokalen Einbindung liegt in der verbesserten Performance. Externe Requests zu Google-Servern können die Ladezeiten deiner Website verlängern, insbesondere wenn die Verbindung instabil ist. Indem du die Schriftarten lokal speicherst, werden sie schneller vom eigenen Server geladen. Dies führt zu einer besseren Benutzererfahrung und kann sich positiv auf das SEO-Ranking auswirken.

Unabhängigkeit und Kontrolle

Mit der lokalen Speicherung der Schriftarten hast du volle Kontrolle über deren Version und Darstellung. Du bist nicht von Änderungen auf den Google-Servern abhängig und kannst die Schriftarten jederzeit anpassen oder aktualisieren, ohne dass externe Einflüsse deine Website beeinflussen.

2. Vorbereitung: Was du benötigst

Bevor du mit der lokalen Einbindung beginnst, solltest du folgende Voraussetzungen erfüllen:

• WordPress-Divi-Website: Stelle sicher, dass dein WordPress mit dem Divi-Theme installiert und eingerichtet ist.
• FTP-Zugang oder Dateimanager: Du benötigst Zugriff auf die Dateien deiner Website, um Schriftarten hochzuladen.
• Google Webfonts Helper: Ein nützliches Tool, um die gewünschten Google Fonts herunterzuladen und die entsprechenden CSS-Regeln zu generieren.
• Grundlegende Kenntnisse in CSS: Um die Schriftarten korrekt in dein Theme einzubinden, solltest du wissen, wie man CSS-Regeln anpasst.

3. Schritt-für-Schritt-Anleitung: Google Fonts lokal in Divi einbinden

Schritt 1: Schriftarten mit Google Webfonts Helper herunterladen

Der einfachste Weg, die gewünschten Google Fonts lokal zu speichern, ist die Nutzung des Google Webfonts Helper. Folge diesen Schritten:

1. Besuche Google Webfonts Helper: Öffne die Website Google Webfonts Helper.
2. Wähle deine Schriftart: Suche nach der Schriftart, die du lokal einbinden möchtest (zum Beispiel „Roboto“ oder „Open Sans“). Klicke auf die Schriftart, um alle verfügbaren Schriftschnitte anzuzeigen.
3. Schriftschnitte auswählen: Wähle die benötigten Schriftschnitte aus – etwa Regular, Bold, Italic – und aktiviere die Option „Modern Browsers“, damit die optimierten Formate (WOFF und WOFF2) bereitgestellt werden.
4. Download: Klicke auf den Download-Button, um ein ZIP-Archiv mit den Schriftdateien sowie dem zugehörigen CSS-Code herunterzuladen.

Schritt 2: Schriftarten auf deinen Server hochladen

Nachdem du die Schriftarten heruntergeladen hast, musst du sie in deinen WordPress-Server hochladen:

1. Entpacken des ZIP-Archivs: Extrahiere die Dateien auf deinem Computer.
2. FTP oder Dateimanager: Verwende ein FTP-Programm (z. B. FileZilla) oder den Dateimanager deines Hosting-Providers, um dich mit deinem Server zu verbinden.
3. Erstelle einen Ordner: Navigiere zum Verzeichnis wp-content/uploads/ und erstelle einen neuen Ordner, zum Beispiel fonts oder google-fonts.
4. Hochladen: Lade die Schriftarten-Dateien (WOFF und WOFF2) in den erstellten Ordner hoch. Notiere dir den Pfad, da du diesen später im CSS verwenden wirst.

Schritt 3: CSS-Code anpassen und einbinden

Um die lokal gespeicherten Schriftarten in dein Divi-Theme zu integrieren, musst du den CSS-Code anpassen:

1. CSS öffnen: Gehe in dein WordPress-Dashboard und navigiere zu „Design“ > „Customizer“ > „Zusätzliches CSS“.
2. CSS-Regeln einfügen: Füge den generierten CSS-Code aus dem Google Webfonts Helper ein und passe die Pfade an. Ein Beispiel könnte folgendermaßen aussehen: @font-face { font-family: 'Roboto'; src: url('/wp-content/uploads/fonts/roboto-regular.woff2') format('woff2'), url('/wp-content/uploads/fonts/roboto-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } Wiederhole diesen Schritt für jede Variante der Schriftart (z. B. Bold, Italic).
3. Speichern: Klicke auf „Veröffentlichen“, um die Änderungen zu speichern.

Schritt 4: Verwendung der Schriftart in Divi

Nachdem die Schriftarten lokal eingebunden sind, kannst du sie nun in deinem Divi-Theme verwenden:

1. Globale Einstellungen anpassen: Gehe zu „Divi“ > „Theme-Optionen“ und öffne den Tab „Benutzerdefiniertes CSS“. Hier kannst du globale CSS-Regeln hinzufügen, um die Schriftart beispielsweise im Body-Tag zu verwenden: body { font-family: 'Roboto', sans-serif; }
2. Elementor/Divi Builder: Falls du den Divi Builder oder Elementor verwendest, solltest du in den typografischen Einstellungen deiner Module oder globalen Einstellungen den Namen deiner lokal eingebundenen Schriftart eingeben, sodass sie in den Designoptionen verfügbar wird.

Schritt 5: Externe Google Fonts deaktivieren

Um sicherzustellen, dass keine externen Google Fonts mehr geladen werden, musst du den externen Aufruf unterbinden:

1. Über die Theme-Einstellungen: Einige Themes bieten in ihren Optionen die Möglichkeit, Google Fonts zu deaktivieren. Prüfe, ob dein Divi-Theme diese Option hat.
2. Manuelle Deaktivierung via functions.php: Falls keine entsprechende Option vorhanden ist, füge folgenden Code in die functions.php deines Child-Themes ein: function disable_google_fonts_in_divi() { wp_dequeue_style('divi-fonts'); wp_deregister_style('divi-fonts'); } add_action('wp_enqueue_scripts', 'disable_google_fonts_in_divi', 100);
3. Plugins nutzen: Alternativ gibt es Plugins wie „Disable Google Fonts“, die diese Aufgabe automatisieren und alle externen Anfragen unterbinden.

6. Zusätzliche Optimierung und Performance-Tipps

Nachdem du die Schriftarten lokal eingebunden hast, gibt es noch einige zusätzliche Maßnahmen, die die Performance und die DSGVO-Konformität weiter verbessern können:

• Font Subsetting: Verwende Tools wie Font Squirrel oder Transfonter, um nur die benötigten Zeichen (Glyphen) der Schriftarten zu laden. Das reduziert die Dateigröße und verbessert die Ladezeiten.
• Caching: Implementiere ein Caching-Plugin wie „W3 Total Cache“ oder „WP Super Cache“, um sicherzustellen, dass die Schriftarten im Browser des Nutzers gespeichert werden und nicht bei jedem Seitenaufruf neu geladen werden müssen.
• Content Delivery Network (CDN): Wenn du ein CDN nutzt, kannst du die lokal gehosteten Schriftarten ebenfalls über das CDN ausliefern, was die Ladezeiten global optimiert.

7. Rechtliche Überlegungen und Datenschutz

Die Einhaltung der DSGVO ist ein wesentlicher Faktor bei der Entscheidung, Google Fonts lokal einzubinden. Indem du keine externen Datenanfragen an Google sendest, verhinderst du, dass personenbezogene Daten deiner Nutzer ohne deren Zustimmung verarbeitet werden. Hier einige rechtliche Punkte:

• Transparenz: Stelle sicher, dass deine Datenschutzerklärung den Umgang mit Schriftarten und deren lokaler Einbindung erläutert.
• Einwilligung: Informiere die Nutzer darüber, dass durch die lokale Einbindung keine Daten an Dritte übermittelt werden. Dies kann das Vertrauen in deine Website stärken.
• Regelmäßige Überprüfungen: Datenschutz ist ein fortlaufender Prozess. Überprüfe regelmäßig, ob deine Implementierung den aktuellen gesetzlichen Vorgaben entspricht und aktualisiere bei Bedarf die technischen Maßnahmen.

8. Zusammenfassung und Fazit

Die lokale Einbindung von Google Fonts in WordPress, speziell im Divi-Theme, ist eine wirksame Methode, um die Datenschutzkonformität deiner Website sicherzustellen und gleichzeitig die Performance zu verbessern. Der Prozess umfasst folgende Hauptschritte:

1. Schriftarten auswählen und herunterladen: Nutze den Google Webfonts Helper, um die benötigten Schriftarten in optimierten Formaten zu erhalten.
2. Hochladen auf den Server: Speichere die Schriftarten in einem geeigneten Ordner, beispielsweise unter wp-content/uploads/fonts/.
3. CSS anpassen: Integriere die Schriftarten mit @font-face in dein Theme-CSS, indem du die korrekten Pfade zu den lokal gespeicherten Dateien angibst.
4. Integration in Divi: Weise deine Schriftarten in den globalen Einstellungen oder im Builder zu, sodass sie in deinem gesamten Design verwendet werden.
5. Deaktivierung externer Google Fonts: Sorge dafür, dass keine externen Anfragen an Google erfolgen – entweder über Theme-Einstellungen, Code in der functions.php oder entsprechende Plugins.
6. Optimierung: Nutze Font Subsetting, Caching und CDN-Techniken, um die Ladezeiten weiter zu verbessern und die Performance zu maximieren.

Mit diesen Maßnahmen kannst du nicht nur rechtliche Risiken minimieren und DSGVO-konform arbeiten, sondern auch die Benutzererfahrung auf deiner Website erheblich verbessern. Lokale Schriftarten sorgen für schnellere Ladezeiten, eine bessere Kontrolle und letztlich für eine stabilere und sicherere Website.

Die Investition in die lokale Einbindung von Google Fonts ist somit eine strategische Entscheidung, die langfristig sowohl den Datenschutz als auch die Performance deiner Website verbessert. Gerade in Zeiten zunehmender Datenschutzanforderungen und immer anspruchsvollerer Nutzererwartungen ist es unerlässlich, alle Komponenten der Website – einschließlich der Schriftarten – so zu optimieren, dass sie den aktuellen Standards entsprechen.

Abschließend lässt sich sagen: Wer Google Fonts lokal einbindet, schützt nicht nur die Privatsphäre der Nutzer, sondern profitiert auch von technischen Vorteilen, die in der heutigen wettbewerbsintensiven Online-Welt den Unterschied machen können. Eine gut optimierte Website, die schnell lädt und datenschutzkonform arbeitet, stärkt das Vertrauen der Besucher und trägt maßgeblich zum Erfolg im digitalen Umfeld bei.