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“
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:
- Installiere das Plugin und aktiviere es – alternativ gibt es noch OMFG
- Gehe auf das Front-End und rufe einige Seiten deines Blogs auf – (dadurch erhält das Plugin die Daten über verwendete Fonts)
- Gehe zurück in das Backend unter Einstellungen > Google Fonts
- Klicke auf die Buttons „Lokal hosten“ und warte einen Moment
- Lösche den Cache, falls du ein Caching-Plugin verwendest
- Prüfe nochmal deine Webseiten
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.
Zum Schluss überprüfen wir noch einmal einige Seiten:
- Lösche vorher den Cache deines Cache-Plugins und auch den Browser Cache.
- Rufe anschließend mehrere Seiten am besten in einem Inkognitofenster auf.
- 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.
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.