Google Fonts lokal einbinden – mit dem Plugin OMGF

von | 17. November 2024

Viele WordPress-Websites verwenden Google Fonts für ein ansprechendes Design. Allerdings können externe Fonts Datenschutzprobleme verursachen (DSGVO). Um dies zu umgehen, kannst du Google Fonts lokal auf deinem Server einbinden. In diesem Beitrag zeige ich dir, wie du das mit dem Plugin OMGF machst.
Deine Themen in diesem Artikel: 2_UMSETZUNG | DSGVO | eRecht | Google | Plugins | Schritt-für-Schritt

Gefällt dir der Inhalt? Teile ihn gern.

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.
  • 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.

strehober webdesign workbook website planung

GUT GEPLANT IST HALB GEWONNEN!

Du möchtest eine Website, die dich und dein Business sichtbar macht und deine Lieblingskunden anzieht? Warum, worüber und für wen: lege mit meinem WORKBOOK WEBSITE PLANUNG für 0 € VOR der Erstellung die Grundlagen dafür. Schritt-für-Schritt holst du so das Beste aus deiner Website heraus.

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

1. OMGF-Plugin installieren und aktivieren

google fonts lokal einbinden
Infos zum Plugin OMGF bei WordPress.org

  1. Melde dich in deinem WordPress-Dashboard an.
  2. Gehe zu Plugins > Installieren und suche nach OMGFOMGF 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, sollte folgende Einstellung immer aktiviert sein: Divi / Theme-Optionen / Allgemein / Allgemein / Verwenden Sie Google Fonts
  • Bevor du mit der Schriften-Optimierung startest, gehe noch unter 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.
  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.
    • Drücke F12, um die Entwicklertools zu öffnen, 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:

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.deit-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!

Du hast noch Fragen? Ich freue mich auf jede einzelne.

BLEIB DRAN UND HOL DIR MEINE MEHRWERT-TIPPS!

Ich versorge dich mit #frischen Perspektiven und #keepitsimple Impulsen rund um deinen Webauftritt – natürlich inkl. meiner Lieblings-Website-Tipps.

strehober-webdesign-footer-hallo

Ich bin Manuela. Du bist selbstständig und wünscht dir eine Website, die dein Business sichtbar macht, Kunden für dich gewinnt und die du einfach im Griff hast? Als Webdesignerin & Website Coach gehe ich mit dir den Weg zu deiner und nicht irgendeiner Website - einer Website, die dich zeigt, die du gerne zeigst und die 24/7 deine Lieblingskunden anzieht. #keepitsimple

DEINE ANZIEHENDE STARTSEITE

Vergiss „Herzlich Willkommen“ und hole deine Besucher sofort mit deiner Startseite ab. Mein eLearning Mini-Kurs mit Startseiten-Vorlagen hilft dir dabei.

VHS KURSE RUND UM DEINE WEBSITE

strehober-webdesign-vhs-kurse

Besuche meine VHS-Kurse in Berlin Pankow und Lichtenberg: Websites mit WordPress & Divi Theme, Aufbau deines Online Business, Einführung in CANVA. 

Gefällt dir der Inhalt? Teile ihn gern.

Das könnte dich auch interessieren

Divi 5 Update – Was erwartet dich?

Divi 5 Update – Was erwartet dich?

Freust du dich auch schon auf das Divi 5 Update? Wenn du bereits Divi-Nutzer bist, wird dich Divi 5 sicher begeistern. Und falls du noch auf der Suche nach dem perfekten Website-Builder bist, ist jetzt der ideale Zeitpunkt, Divi auszuprobieren.

Ankerlinks setzen mit Divi in WordPress: So gelingt es in zwei Schritten.

Ankerlinks setzen mit Divi in WordPress: So gelingt es in zwei Schritten.

Ankerlinks sind eine großartige Möglichkeit, Besuchern deiner Website zu helfen, schnell zu bestimmten Bereichen einer Webseite zu navigieren. In diesem Artikel zeige ich dir Schritt für Schritt, wie du mit dem Divi Theme in WordPress Ankerlinks setzen kannst. Im Pro-Tipp erfährst du auch, wie du Ankerlinks für das Menü deiner einseitigen Website (Onepager) verwendest.

Ladezeit Website messen: mit 2 kostenlosen Tools

Ladezeit Website messen: mit 2 kostenlosen Tools

Wie lange braucht deine Website zum Laden? Das solltest du wissen. Denn je kürzer die Ladezeit, desto eher wird deine Seite von Google gefunden und kommen und bleiben Besucher auf deiner Website. In diesem Blogbeitrag erfährst du, wie du die Ladezeit mit 2 kostenlosen Tools messen kannst.

Viele Menschen wünschen sich, sie hätten früher angefangen. Fast niemand wünscht sich, er hätte später angefangen. James Clear