WordPress – Google Fonts lokal einbinden – So einfach geht’s

Anleitung Google Fonts lokal einbinden

Verwendest du Schriftarten von Google? Falls ja, musst du diese auf jeden Fall lokal einbinden.
Wie einfach das geht und welche Alternativen zu Google Fonts es gibt zu, efährst du in diesem Beitrag.

Was sind Google Fonts?

Google Fonts ist ein kostenloser Service von Google, der Webdesignern und Entwicklern dabei hilft, die perfekten Schriftarten für ihre Projekte zu finden. Mit Google Fonts kannst du auf eine riesige Auswahl an professionell gestalteten und optimierten Schriften zugreifen.

Darum solltest du Google Fonts lokal einbinden

Durch das Laden der Schriften vom Google Server erhält Google die IP-Adresse des Besuchers. Nach der DSVGO zählt bereits die IP-Adresse zu personenbezogenen Daten und ist aus rechtlicher Sicht bedenklich. Es gab bereits viele Abmahnungen an Webseiten-Betreibern.

Wie finde ich heraus, welche Schriften mein Blog von Google verwendet?

Dazu kannst du einen Google Fonts Checker nutzen, um schnell die Ergebnisse zu bekommen.

Überprüfe auch mehrere Unterseiten deines Blogs, da unterschiedliche Dienste oder Plugins möglicherweise Google Fonts laden können.

Dafür bieten Web-Browser die Entwicklertools an.

Klicke auf der Webseite mit der rechten Maustaste – dann auf “Element untersuchen”. Anschließend öffnet sich die Konsole unter oder rechts.

Danach Klick auf den Tab “Quellcode”

Browser Entwicklertools Google Font

Google Fonts lokal einbinden mit Plugin

Die schnellste Methode ist das Einbinden mit Plugin.
Getestet habe ich Local Google Fonts

Schritt-für-Schritt-Anleitung:

  1. Installiere das Plugin und aktiviere es – alternativ gibt es noch OMFG
  2. Gehe auf das Front-End und rufe einige Seiten deines Blogs auf – (dadurch erhält das Plugin die Daten über verwendete Fonts)
  3. Gehe zurück in das Backend unter Einstellungen > Google Fonts
  4. Klicke auf die Buttons „Lokal hosten“ und warte einen Moment
  5. Lösche den Cache, falls du ein Caching-Plugin verwendest
  6. Prüfe nochmal deine Webseiten

Wordpress Plugin Local Google Fonts

Was tun, wenn nicht alle Fonts erkannt werden?

Es kann verschiedene Ursachen haben, warum nicht alle Fonts erkannt werden.

Eingebundene externe Inhalte

Youtube, Instagram-Feed, Facebook, Google Ads und Maps könnten Google Fonts laden.
Diese Inhalte sollten generell erst geladen werden, wenn der Nutzer das Laden aktiv bestätigt – “Cookie Consent”. In diesem Beitrag gehe ich näher auf das Thema ein.

Generell solltest du dir überlegen, solche Inhalte einzubinden. Es kostet auch Ladezeit z.B. der Youtube Player mit fast 500Kb.

Falls du nicht auf bestimmte externen Content verzichten möchtest, empfehle ich Borlabs-Cookie.
Damit kannst du das Nachladen sperren lassen, wenn der Besucher keine Zustimmung erteilt.

Probleme mit Caching-Plugins

Einige ermöglichen es Google Fonts optimiert zu laden. Dadurch kann die lokale Einbindung blockiert werden. Deaktiviere daher diese Einstellung im Cache-Plugin.

Einstellungen in WordPress Themes oder Page Buildern

Hier gibt es Einstellungen, welche ebenfalls das lokale hosten blockiert. Diese sollten daktiviert werden, damit o.g. Plugins Fonts lokal einbinden können. Probleme bereitet z. B. das Divi-Theme, wenn Einstellungen zu Google Fonts aktiviert sind.

Tipp: Es stehen viele Page Builder und Themes zur Verfügung, die es ermöglichen, eigene Fonts hochzuladen. Elementor und Divi-Theme sind zwei Beispiele.

Man kann mit dem Google Webfont Helper die Fonts herunterladen und dann direkt auf die Seite hochladen. Bei dem Astra Theme – welches ich hier im Blog verwende – geht das mit einer 1-Klick-Einbindung.

Google Fonts deaktivieren

Optional können wir noch veranlassen, dass die Verbindung zum Google Fonts Server gesperrt wird.
Dafür gibt es das kostenlose Plugin Disable and Remove Google-Fonts.

Das Plugin deaktiviert bei vielen Themes wie Avada, Enfold und allen Standard-Themes die Verbindung zu Google.

Es funktioniert auch mit Page-Buildern wie Elementor, WPBackery oder Divi.

Es kann hartnäckige Fälle geben wo dennoch Fonts von Google geladen werden. Hier empfehle ich das OMGF Pro Plugin. Es verfügt über professionelle Erkennungs-Methoden und kann das Laden besser unterbinden.

Solange es auch nur noch eine Verbindung zu Google gibt, bestehen weiterhin rechtliche Risiken.

Zum Schluss überprüfen wir noch einmal einige Seiten:

  1. Lösche vorher den Cache deines Cache-Plugins und auch den Browser Cache.
  2. Rufe anschließend mehrere Seiten am besten in einem Inkognitofenster auf.
  3. Prüfe wie oben beschrieben jede Seite mit der Konsole, ob noch Verbindungen zu Google Fonts bestehen – fonts.googleapis.com oder fonts.gstatic.com.

 

FAQs

Setzt das Laden von Google Fonts Cookies?

Nein, Cookies werden dadurch nicht gesetzt.

Wird die Ladezeit höher, wenn ich Google Fonts lokal hoste?

Ganz im Gegenteil. Die Ladezeit sollte sich sogar etwas verringern, da der Browser eine Verbindung weniger aufbauen muss.

Gibt es Alternative Web Safe Fonts?

Natürlich – selber nutze ich hier Verdana. Arial oder Helvetica sehen auch gut und modern aus.

1 Kommentar zu „WordPress – Google Fonts lokal einbinden – So einfach geht’s“

  1. Danke für den Artikel. Es gibt meiner Meinung nach keinen Grund Fonts nicht lokal einzubinden.
    Besondes den Hinweis auf die extern eingebundene Inhalte finde ich sehr wertvoll. Das kann man schnell vergessen und dann ewigs nach einem Fehler suchen.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links. Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.
Nach oben scrollen