Wie man Google Fonts schnell und einfach lokal einbindet [unter 5 Minuten]

Gerade in Zeiten der DSGVO ist es wichtig die eigene Website so abmahnungssicher wie möglich zu machen. Während Google Analytics und andere Tracking Software im Focus stehen wird auf einen kleinen aber feinen API call meistens vergessen, Google Fonts.

Wir zeigen dir hier wie du ohne Programmierkenntnisse Google Fonts mit ein paar Klicks einfach und schnell lokal einbinden kannst.

Wie erkenne ich ob Google Fonts bei mir eingebunden ist?

Solltest du oder deine Agentur die Schriftarten nicht aktiv lokal eingebunden haben, dann ist es zu 99% sicher, dass du Google Fonts verwendest.

Es gibt 2 Möglichkeiten zu checken ob dass der Fall ist

1) Google Fonts erkennen, mit einem Webservice

1) Gehe dafür auf den Google Fonts Checker von sicher3 -> Link

2) Im Feld für die URL gib deine URL ein und klicke auf prüfen. Je nachdem wieviele User gerade gleichzeitig den Checker benutzen kann die Überprüfung einige Sekunden dauern.

3) Der Checker zeigt dir an ob du handeln musst, oder nicht

a) Google Fonts wurden gefunden – mache beim Punkt „Google Fonts lokal einbinden (in unter 5 Minuten) weiter

Google Fonts gefunden

b) Google Fonts nicht gefunden – du bist bei Google Fonts Thema sicher. Keine weiteren Schritte notwendig

Google Fonts nicht gefunden

2) Google Fonts erkennen, mit DevTools

  1. Dafür gehe auf deine Webseite und klicke auf deine rechte Maustaste – wähle „Inspect“ oder „Untersuchen“ (je nach Spracheneinstellung) aus.
  1. Checke unter „Sources“ oder „Quellen“ ob fonts.googleapis.com und fonts.gstatic.com vorhanden sind.
3. In weiterer Folge checke ob diese APIs auch tatsächlich aufgerufen werden. Gehe dafür auf „Network“ oder „Netzwerk“ und lade deine Seite neu (CMD+R bei Apple)
Finde deinen Stylesheet mit den Fonts (dieser beginnt meist mit family=***) und klicke ihn an.

Hier siehst du, dass die Schriftart tatsächlich von fonts.gstatic.com bzw. von fonts.googleapis.com geladen werden.

Es besteht also Handlungsbedarf.

Google Fonts lokal einbinden (in unter 5 Minuten) – keine Progammierkenntnisse notwendig

Wenn du also heraus gefunden hast, dass die Schriftarten über eine Google API geladen wird, dann musst du das lösen.

Danke eines Plugins namens Perfmatters* kannst du dies einfach, schnell und mit ein paar Mausklicks lösen.

Perfmatters* ist ein kostenpflichtiges Plugin (ab 25€) – aber es hilft dir nicht nur Google Fonts lokal einzubinden, sondern auch deine Webseite schnell zu machen.

Dadurch erhältst du einen zusätzlichen SEO Boost, es zahlt sich also auf jeden Fall aus es zu kaufen. Ich habe es bei all meinen Webseiten im Einsatz.

  1. Nachdem du dein richtigen Plan für dich ausgewählt hast erhältst du Zugang zum Plugin File und deiner Lizenz.
  2. Lade das Plugin auf deine Wordpress Installation.
Klicke unter Plugins auf Installieren > Plugin hochladen
Lade das File entweder mit Drag & Drop hoch oder wähle das File mit Hilfe des „Choose File“ Buttons
  1. Nachdem du das File hochgeladen hast klicke auf „Jetzt installieren“ und danach auf „Plugin Aktivieren“
  2. Suche danach in den Plugins nach Perfmatters und klicke auf Einstellungen
  1. Gebe unter Lizenz deinen Lizenzschlüssel ein (hast du via Mail erhalten) – dadurch erhältst du Updates des Plugins
  1. Der nächste Step ist das lokale Einbinden von Google Fonts, dafür klicke auf „Fonts“

Und aktiviere „Display Swap“ und „Local Google Fonts“ – die Änderungen speicherst du mit dem Klick auf „Änderungen speichern“

  1. Lösche danach den Cache, falls du ein Caching Plugin verwendest, öffne deine Webseite in einem Incognito Fenster und gehe die Schritte von „Wie erkenne ich ob Google Fonts bei mir eingebunden ist?“ – du solltest jetzt keinen API Call zu Google Fonts haben, bzw. grün beim sicher3 Google Fonts Checker sein.
Um dein neues Performance Plugin „Perfmatters“ optimal ausnutzen zu können empfehlen wir die Einrichtungsanleitung „Perfmatters Einstellungen – „

Google Fonts lokal einbinden – für Programmierer

In diesem Video erfährst du wie du Google Fonts lokal einbinden kannst, auch wenn das Video vom Theme GeneratePress* ist, kannst du die Resultate für jedes andere Theme auch einbinden.

YouTube Video

Warum sollte ich Google Fonts lokal einbinden?

Neben dem rechtlichen Aspekt (Abmahnwelle Google Fonts in Österreich | Abmahnungen Google Fonts in Deutschland ) gibt es auch ein technisches Argument Google Fonts lokal einzubinden.

Wenn du deine Schriftarten über die Google Fonts API anbindest, dann wird bei jedem Seitenaufruf ein Request an den Google Fonts Server gestellt, dieser gibt dann zurück ob die Schriftart vorhanden ist, oder nicht und stellt die Daten zur Verfügung.

Diese Schritte kosten Ladezeit.

Und Ladezeit ist etwas, was man möglichst vermeiden soll, damit das technische SEO deiner Seite optimiert ist.

Wenn du die Schriftart lokal geladen hast, dann wird der Request an die Google API nicht gestellt und die Seite muss auch nicht warten, dass eine Antwort retour kommt.

Wie du erkennen kannst, heißt weniger Anfragen an externe Server gleich schnellere Ladezeit.

Wie ist es dir mit dieser Anleitung gegangen, kann ich etwas verbessern, fehlt etwas oder möchtest du einfach so eine Nachricht hinterlassen? Dann einfach ein Kommentar dar lassen, ich freu mich 🙂

Was ist Google Fonts?

Google Fonts ist ein Schriftarten Service von Google. Dafür musst du die Schriftarten nicht auf deinen eigenen Server laden, sondern kannst diese über einen Google Server nachladen.

Sind Google Fonts DSGVO konform?

Das ist noch nicht vollständig aus gefochten. Während Google selber angibt keine IP Adressen für Google Fonts zu speichern gibt es immer wieder Abmahnwellen in Österreich & Deutschland. Binde daher deine Google Fonts lokal ein, damit du auf der sicheren Seite bist.

Schreibe einen Kommentar