Google Fonts lokal einbinden – mit dem Plugin OMGF

Warum Google Fonts lokal einbinden?

Die Open-Source-Schriftarten von Google Fonts (Schriftarten, die von Google bereitgestellt werden) werden unter einer Lizenz veröffentlicht, die es dir erlaubt, sie auf jeder Website zu verwenden, egal ob kommerziell oder privat.

Werden die Google Fonts jedoch direkt von den Servern von Google geladen, können personenbezogene Daten wie IP-Adressen an Google übertragen werden. Dies kann potenziell gegen Datenschutzbestimmungen (DSGVO) verstoßen und zu rechtlichen Problemen führen. Und leider reicht es auch nicht aus, Google Fonts mit einem Cookie-Plugin in das Cookie-Banner aufzunehmen.

Um diese Probleme zu umgehen, kannst du Google Fonts lokal und somit DSGVO-konform laden. Die lokale Einbindung (Hosting) der Fonts sorgt dafür, dass alle Schriftarten direkt von deinem eigenen Server geladen werden, wodurch keine externen Verbindungen zu Google erforderlich sind.

Eine Möglichkeit: mit dem Plugin OMGF

Eine einfache und bewährte Möglichkeit, Google Fonts lokal einzubinden, ist die Verwendung des Plugins OMGF Optimize Google Fonts. Wenn das Plugin installiert ist, erkennt es in den meisten Fällen die Google Schriftarten und speichert diese dann lokal ab. In diesem Beitrag zeige ich dir, wie das Schritt-für-Schritt funktioniert.

Tipp: Mache die Einbindung am besten erst am Schluss, wenn du dich für deine Schriften entschieden hast und mit deiner Website live gehen möchtest. 

Weitere Möglichkeiten, Google Fonts lokal einzubinden

Es gibt natürlich Alternativen zum OMGF-Plugin, um Google Fonts lokal einzubinden. Hier sind verschiedene Ansätze und Tools, die dir helfen, dies umzusetzen. Die richtige Wahl hängt vor allem von deinen technischen Fähigkeiten ab.

• Plugin-Alternativen: Self-Hosted Google Fonts und Local Google Fonts
• Einbindung der Schriftarten direkt über dein Theme.
  • Das Divi Theme ermöglicht es dir, Google Fonts als benutzerdefinierte Schriftarten hochzuladen und sie dann in deinen Divi-Designs zu verwenden.
  • Dafür navigierst du im Divi Builder auf einer beliebigen Webseite in die Einstellungen eines Text-Moduls, gehst zum Reiter Design „Text Schriftart“ und klickst auf „Hochladen“. Du wählst deine Schriftarten (im ttf-Format) aus, lädst sie hoch und bindest sie damit lokal ein. Achte im Anschluss darauf, dass du in den Divi Theme-Optionen unter „Allgemein“ die Option „Google Schriftarten verwenden“ deaktivierst (=grau). (Quelle: Elegant Themes)
• Manuelles Herunterladen und Einbinden (per CSS) für maximale Kontrolle.
• Verzichte komplett auf Google Fonts und setze auf vorinstallierte Systemschriften wie Arial oder Helvetica. Dies verbessert die Performance und beseitigt jegliche Datenschutzbedenken, schränkt jedoch die Designfreiheit ein.

GUT GEPLANT IST HALB GEWONNEN!

Deine Website soll wirken – nicht nur hübsch sein? Dann starte nicht mit Technik sondern mit klaren Zielen, Inhalten und deiner Wunschkundschaft. Mein kostenloses „Workbook Website Planung“ hilft dir dabei. Ideal, wenn du dir vor dem Aufbau deiner Website erstmal Klarheit wünschst.

ZUM WORKBOOK FÜR 0€

Schritt-für-Schritt-Anleitung mit dem Plugin OMGF

1. OMGF-Plugin installieren und aktivieren

1. Melde dich in deinem WordPress-Dashboard an.
2. Gehe zu Plugins > Installieren und suche nach OMGF – OMGF Optimize Google Fonts (in der kostenlosen Variante).
3. Klicke auf Jetzt installieren und danach auf Aktivieren.

Das Plugin ist jetzt einsatzbereit!

Tipps, bevor es richtig losgeht:

• Nutzt du das Divi Theme, solltest folgende Einstellung immer aktiviert (= blau) sein: Divi / Theme-Optionen / Allgemein / Allgemein / Verwenden Sie Google Fonts + Untergruppen von Google Fonts aktivieren, Außerdem solltest du unter Allgemeines / Leistung -> „Verbessern Sie das Laden von Google Fonts“ deaktivieren (= grau) (Quelle: Plugin-Entwickler)
• Bevor du mit der Schriften-Optimierung startest, gehe im WordPress Dashboard noch zu Design / Customizer / Allgemeine Einstellungen / Typografie und stelle sicher, dass du deine Schriften (für Überschriften und Absätze) festgelegt hast. 
• Nutzt du ein Caching-Plugin (z. B. WP Optimize) leere den Cache und deaktiviere die Caching-Funktion für die Dauer der Einrichtung.

2. OMGF richtig einstellen

Nach der Installation musst du OMGF so konfigurieren, dass es die Fonts von Google lokal speichert:

1. Öffne die OMGF-Einstellungen:
   • Gehe zu Einstellungen > Optimize Google Fonts im WordPress-Dashboard.
   • Nutzt du das Divi-Theme aktiviere unter Einstellungen/Advanced noch die „Divi/Elementor Compatibility“ (Quelle: Plugin-Entwickler)
2. Fonts automatisch scannen:
   • Im OMGF-Dashboard findest du die Schaltfläche Start Scanning. Klicke darauf, damit das Plugin nach verwendeten Google Fonts auf deiner Website sucht.
   • Komplett selbstständig überprüft das Tool jetzt die Website auf Google-Schriften.
   • OMGF listet anschließend alle Fonts auf, die von deiner Website genutzt werden.
3. Fonts lokal speichern:
   • Wähle die Schriftarten aus, die du lokal hosten möchtest. In den meisten Fällen kannst du alle vorgeschlagenen Fonts übernehmen.
   • Klicke auf Save & Optimize, um die Fonts herunterzuladen und lokal auf deinem Server zu speichern.

3. Google Fonts lokal einbinden

• OMGF bindet jetzt die lokal gespeicherten Fonts automatisch in deine Website ein. Du musst dich um nichts weiter kümmern, da das Plugin die URLs der Schriftarten in den Stylesheets anpasst.
• Deine Google Fonts findest du jetzt unter wp-content/uploads/omgf/). Hast du einen FTP-Zugang, kannst du das dort nachprüfen. 

Sollte es Probleme mit dem Plugin geben (ggf. ist es nicht mit einem anderen Plugin kompatibel), kannst du hier nachsehen.

4. Testen, ob die Fonts lokal geladen werden

Überprüfe anschließend im Frontend (als auf deiner Website), ob deine Schriften richtig angezeigt werden.

Um sicherzustellen, dass keine externen Verbindungen zu Google mehr bestehen, solltest du abschließend noch folgende Schritte durchführen:

1. Überprüfung mit Browser-Entwicklertools:
   • Öffne deine Website im Browser.
   • Öffne anschließend die Entwicklertools deines Browsers und wechsle zum Tab Netzwerk.
   • Lade die Seite neu und suche in der Liste nach Einträgen, die mit fonts.googleapis.com oder fonts.gstatic.com beginnen.
   • Wenn keine solchen Einträge erscheinen, werden die Fonts korrekt lokal geladen.
2. Datenschutzprüfung mit externen Tools:
   • Nutze Tools wie eRecht24 Font Scanner oder den Webscanner von SICHER3, um sicherzugehen, dass alle Verbindungen zu Google entfernt wurden.

Jetzt kannst du auch dein Caching-Plugin wieder aktivieren. 

Ausnahme

Bestimmte Google-basierte Dienste (etwa Google reCAPTCHA, Google Maps und YouTube) operieren mit eigenen Google-Webfonts-Integrationen, die sich nicht deaktivieren lassen. In diesem Fall musst du als Seitenbetreiber eine hinreichende Einwilligungslösung (Cookie-Consent-Tool) eingerichtet haben, d. h. du sperrst/blockst diese Google-Dienste bis zur Einwilligung durch den Besucher.

Solange die Google-Dienste auf deiner Website gesperrt sind, z. B. via Cookie Content Blocker, werden auch keine Google Fonts geladen und infolgedessen keine Daten an Google übertragen. Deaktiviere ggf. die Drittanbieter-Dienste vorerst, um zu überprüfen, ob deine Schriften korrekt eingebunden sind. Quellen: e-recht24.de, it-recht-kanzlei.de

Fazit

Mit dem OMGF-Plugin kannst du Google Fonts ganz einfach lokal auf deiner WordPress-Website hosten und so Datenschutzprobleme vermeiden. Die automatische Erkennung und Optimierung machen den Prozess unkompliziert, selbst für WordPress-Anfänger. Mit lokal gehosteten Schriftarten verbesserst du nicht nur die DSGVO-Konformität deiner Website, sondern reduzierst auch die Abhängigkeit von externen Diensten.

Probiere es aus und schütze die Daten deiner Nutzer – ohne Kompromisse beim Design!