Google Fonts lokal einbinden in Divi – So machst du deine Website DSGVO-konform und schneller

Die Gestaltung einer ansprechenden Website ist heute wichtiger denn je – und dabei spielt die Wahl der richtigen Schriftarten eine zentrale Rolle. Viele Webdesigner und Website-Betreiber nutzen Google Fonts, um ihren Seiten ein modernes, typografisch ansprechendes Aussehen zu verleihen. Das Divi-Theme von Elegant Themes bietet dabei eine herausragende Möglichkeit, Google Fonts schnell und einfach in die eigene Website zu integrieren. Allerdings gibt es seit Inkrafttreten der DSGVO (Datenschutz-Grundverordnung) in Europa erhebliche Bedenken bezüglich des Datenschutzes, da Google Fonts standardmäßig von externen Google-Servern geladen werden.

Um diese Probleme zu umgehen und sowohl die Performance als auch die DSGVO-Konformität deiner Website zu gewährleisten, empfiehlt es sich, Google Fonts lokal in Divi einzubinden. In diesem umfassenden Leitfaden erfährst du Schritt für Schritt, wie du Google Fonts lokal hostest, in dein Divi-Theme integrierst und dadurch mögliche rechtliche Risiken minimierst.

1. Warum Google Fonts lokal einbinden?

1.1 Datenschutz und DSGVO

Die Datenschutz-Grundverordnung (DSGVO) schreibt vor, dass personenbezogene Daten nur mit ausdrücklicher Einwilligung verarbeitet werden dürfen. Beim Laden von Google Fonts werden automatisch die IP-Adressen der Besucher an Google-Server übermittelt – auch wenn Google behauptet, diese Daten nicht dauerhaft zu speichern. Für Webseitenbetreiber bedeutet dies, dass das externe Laden von Google Fonts als unzulässige Datenübertragung interpretiert werden kann. Abmahnungen und hohe Bußgelder sind die Folge, wenn diese Vorgaben nicht eingehalten werden.

1.2 Performance und Ladezeiten

Ein weiterer entscheidender Vorteil der lokalen Einbindung besteht in der verbesserten Ladegeschwindigkeit. Externe Anfragen an die Google-Server können die Ladezeiten deiner Website verlängern, was nicht nur das Nutzererlebnis beeinträchtigt, sondern auch negative Auswirkungen auf das SEO-Ranking haben kann. Werden die Schriftarten hingegen lokal auf deinem eigenen Server gehostet, entfällt dieser zusätzliche Request, wodurch die Seiten schneller geladen werden.

1.3 Unabhängigkeit und Kontrolle

Wenn du Google Fonts lokal hostest, hast du die volle Kontrolle über die Schriftarten und bist nicht von externen Servern abhängig. Das bedeutet, dass Änderungen bei Google oder mögliche Serverprobleme keinen Einfluss auf das Erscheinungsbild deiner Website haben. Außerdem kannst du genau steuern, welche Schriftschnitte und -gewichte geladen werden, was dir hilft, die Dateigrößen zu minimieren und die Performance weiter zu verbessern.

2. Vorbereitung: Was du benötigst

Bevor du mit der lokalen Einbindung beginnst, solltest du sicherstellen, dass folgende Voraussetzungen erfüllt sind:

• WordPress-Installation mit Divi-Theme: Deine Website sollte auf WordPress laufen und Divi als Theme nutzen.
• FTP-Zugang oder Dateimanager: Du benötigst Zugriff auf die Dateien deiner Website, um die Schriftart-Dateien hochzuladen.
• Grundkenntnisse in CSS: Um die Schriftarten korrekt einzubinden, solltest du zumindest grundlegende Kenntnisse in CSS haben.
• Google Webfonts Helper: Ein hilfreiches Tool, um die gewünschten Google Fonts herunterzuladen und den entsprechenden CSS-Code zu generieren.

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

Schritt 1: Schriftarten mit Google Webfonts Helper herunterladen

Der einfachste Weg, um die benötigten Google Fonts lokal verfügbar zu machen, ist die Verwendung von Google Webfonts Helper.

1. Besuche Google Webfonts Helper: Öffne den Link und wähle im Suchfeld die gewünschte Schriftart, z. B. „Roboto“ oder „Open Sans“.
2. Schriftschnitte auswählen: Wähle die Schriftschnitte aus, die du benötigst – beispielsweise Regular, Bold und Italic. Es ist empfehlenswert, nur die tatsächlich verwendeten Varianten auszuwählen, um die Dateigröße zu minimieren.
3. Modern Browsers aktivieren: Stelle sicher, dass du den modernen Browser-Modus auswählst, um die Schriftarten in optimierten Formaten (WOFF und WOFF2) zu erhalten.
4. Download: Klicke auf „Download“, um das ZIP-Archiv herunterzuladen, das sowohl die Schriftdateien als auch den entsprechenden CSS-Code enthält.

Schritt 2: Schriftarten auf deinen Server hochladen

Nachdem du die Schriftarten heruntergeladen hast, musst du sie auf deinem WordPress-Server speichern.

1. ZIP-Archiv entpacken: Extrahiere die Dateien auf deinem Computer.
2. FTP oder Dateimanager verwenden: Verbinde dich mit deinem Server mittels FTP (z. B. mit FileZilla) oder nutze den Dateimanager in deinem Hosting-Panel.
3. Ordner erstellen: Navigiere zu wp-content/uploads/ und erstelle einen neuen Ordner, beispielsweise fonts oder google-fonts.
4. Dateien hochladen: Lade alle entpackten Schriftdateien (WOFF und WOFF2) in diesen Ordner hoch. Notiere dir den genauen Pfad, da du diesen im CSS verwenden wirst.

Schritt 3: CSS-Code anpassen und einbinden

Nun musst du den von Google Webfonts Helper generierten CSS-Code anpassen, um die Schriftarten lokal zu referenzieren.

1. CSS-Code bearbeiten: Öffne den CSS-Code, der mit dem Download bereitgestellt wurde. Dieser Code enthält normalerweise @font-face-Regeln mit URLs, die auf die Google-Server verweisen.
2. Pfade anpassen: Ändere die URLs so, dass sie auf den Ordner auf deinem Server verweisen, in den du die Schriftarten hochgeladen hast. Ein Beispiel: @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; }
3. CSS einbinden: Füge den angepassten CSS-Code in den Customizer ein, indem du zu Design > Customizer > Zusätzliches CSS gehst, oder füge ihn in die style.css deines Child-Themes ein.

Schritt 4: Schriftarten in Divi verwenden

Nachdem die Schriftarten lokal eingebunden sind, musst du sicherstellen, dass dein Divi-Theme diese Schriftarten auch verwendet.

1. Globale Einstellungen in Divi: Öffne dein WordPress-Dashboard und gehe zu Divi > Theme-Optionen. Unter den typografischen Einstellungen kannst du die Schriftarten auswählen, die auf deiner Website verwendet werden sollen.
2. Eigene Schriftarten angeben: Wenn du den lokal eingebundenen Font verwenden möchtest, gib den Namen der Schriftart, wie im @font-face-Block definiert, ein – zum Beispiel „Roboto“.
3. Elementor oder Divi Builder: Solltest du den Divi Builder oder Elementor verwenden, kannst du in den Moduleinstellungen die Schriftart ebenfalls auswählen. Da der CSS-Code jetzt lokal eingebunden ist, wird der Font automatisch verwendet, ohne externe Aufrufe zu tätigen.

Schritt 5: Externe Google Fonts deaktivieren

Um sicherzustellen, dass keine weiteren externen Anfragen an Google-Server gesendet werden, musst du alle anderen externen Google Fonts aus deinem Theme deaktivieren.

1. Theme-Einstellungen überprüfen: Manche Themes bieten in den Optionen die Möglichkeit, Google Fonts zu deaktivieren. Überprüfe in den Divi-Theme-Optionen, ob es eine entsprechende Einstellung gibt.
2. Manuelle Deaktivierung via functions.php: Falls keine Einstellung vorhanden ist, füge folgenden Code in die functions.php deines Child-Themes ein, um alle externen Google Fonts zu entfernen: function disable_divi_google_fonts() { wp_dequeue_style('divi-fonts'); wp_deregister_style('divi-fonts'); } add_action('wp_enqueue_scripts', 'disable_divi_google_fonts', 100);
3. Plugins verwenden: Alternativ gibt es Plugins wie „Disable Google Fonts“, die diese Aufgabe automatisieren und sicherstellen, dass keine externen Google Fonts geladen werden.

6. Zusätzliche Optimierungen und Performance-Tipps

Nachdem du Google Fonts lokal eingebunden hast, gibt es noch einige Schritte, die du unternehmen kannst, um die Performance deiner Website weiter zu optimieren:

• Font Subsetting: Reduziere die Schriftart-Dateigröße, indem du nur die benötigten Zeichen (Glyphen) einbindest. Tools wie Font Squirrel oder Transfonter helfen dabei, nur die relevanten Zeichen zu extrahieren.
• Caching: Verwende ein Caching-Plugin wie „W3 Total Cache“ oder „WP Super Cache“, um sicherzustellen, dass die Schriftarten im Browser des Nutzers zwischengespeichert werden. Dadurch wird die Ladezeit bei wiederholten Besuchen erheblich verkürzt.
• CDN: Falls du ein Content Delivery Network (CDN) einsetzt, kannst du die lokal gehosteten Schriftarten auch über das CDN ausliefern, um die Ladezeiten weltweit zu verbessern.

7. Rechtliche Aspekte und Datenschutz

Die DSGVO schreibt vor, dass personenbezogene Daten nur mit Zustimmung verarbeitet werden dürfen. Indem du Google Fonts lokal einbindest, vermeidest du, dass personenbezogene Daten wie die IP-Adresse deiner Besucher an Google übertragen werden. Dies stellt sicher, dass deine Website den datenschutzrechtlichen Anforderungen entspricht und schützt dich vor möglichen Abmahnungen oder Bußgeldern.

Einige rechtliche Punkte, die du beachten solltest:

• Transparenz: Aktualisiere deine Datenschutzerklärung, um zu erklären, wie und warum du Schriftarten lokal hostest und dass keine Daten an Dritte übermittelt werden.
• Kontinuierliche Überprüfung: Datenschutz ist ein fortlaufender Prozess. Es ist ratsam, regelmäßig zu überprüfen, ob deine Implementierung noch den aktuellen gesetzlichen Vorgaben entspricht.

8. Zusammenfassung und Fazit

Das lokale Einbinden von Google Fonts in WordPress, insbesondere in einem Divi-Theme, ist ein effektiver Weg, um sowohl die DSGVO-Konformität als auch die Performance deiner Website zu verbessern. Die wichtigsten Schritte umfassen:

1. Schriftarten auswählen und herunterladen: Nutze den Google Webfonts Helper, um die gewünschten Schriftarten in den optimalen Formaten (WOFF/WOFF2) zu erhalten.
2. Hochladen auf den Server: Lade die Schriftarten in einen definierten Ordner, z. B. wp-content/uploads/fonts/, hoch.
3. CSS-Code anpassen: Passe den CSS-Code an, sodass die Schriftarten von deinem Server geladen werden.
4. Integration in Divi: Weise in den Divi-Theme-Optionen oder im Customizer die lokal eingebundenen Schriftarten als Standard-Schriftarten deiner Website zu.
5. Deaktivierung externer Google Fonts: Sorge dafür, dass alle externen Anfragen an Google-Server deaktiviert werden – entweder manuell über die functions.php oder durch passende Plugins.
6. Performance-Optimierung: Verwende Techniken wie Font Subsetting, Caching und ggf. ein CDN, um die Ladezeiten weiter zu verbessern.

Durch die Umsetzung dieser Maßnahmen stellst du sicher, dass deine Website nicht nur optisch ansprechend, sondern auch rechtlich abgesichert und leistungsstark ist. Die lokale Einbindung von Google Fonts bietet dir mehr Kontrolle und Unabhängigkeit, schützt die Privatsphäre deiner Nutzer und kann sogar zu einer verbesserten Seitenladegeschwindigkeit führen.

Abschließend ist es wichtig zu betonen, dass der Schutz personenbezogener Daten in der heutigen digitalen Landschaft oberste Priorität hat. Die Einhaltung der DSGVO ist nicht nur eine rechtliche Notwendigkeit, sondern auch ein Vertrauensbeweis gegenüber deinen Besuchern. Wer in die Optimierung und lokale Einbindung von Ressourcen wie Google Fonts investiert, schafft eine zukunftssichere Basis für den Erfolg der eigenen Website.

Ich hoffe, dieser Leitfaden hilft dir dabei, Google Fonts in deinem Divi-Theme lokal einzubinden und deine Website DSGVO-konform sowie leistungsfähig zu gestalten. Falls du weitere Fragen hast oder Unterstützung benötigst, zögere nicht, dich in den Kommentaren oder über Kontaktmöglichkeiten an entsprechende Experten zu wenden.