Google Fonts lokal einbinden: Anleitung in fünf Schritten

Bindest du eine Schrift über fonts.googleapis.com ein, baut der Browser jedes Besuchers eine Verbindung zu Google auf und überträgt dabei mindestens die IP-Adresse. Das LG München I hat darin 2022 (Az. 3 O 17493/20) eine Verletzung des allgemeinen Persönlichkeitsrechts gesehen und Schadensersatz zugesprochen. Danach folgte eine Welle von Abmahnschreiben.

Schritt 1: Prüfen, welche Schriften geladen werden

Suche im Quelltext nach „fonts.googleapis.com“ und „fonts.gstatic.com“. Beides kann in einer HTML-Datei stehen, in einer CSS-Datei als @import oder in einem Theme-Setting versteckt sein.

Schritt 2: Schriftdateien herunterladen

Lade die benötigten Schnitte von der Google-Fonts-Seite herunter. Beschränke dich auf das, was du wirklich nutzt: Regular und Bold reichen fast immer. Jeder zusätzliche Schnitt kostet Ladezeit.

Schritt 3: In das moderne Format umwandeln

woff2 ist rund 30 Prozent kleiner als woff und wird von allen aktuellen Browsern unterstützt. Andere Formate braucht man heute nicht mehr.

Schritt 4: Per @font-face einbinden

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  /* swap: Text ist sofort sichtbar, statt unsichtbar zu bleiben */
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Schritt 5: Alte Einbindung entfernen und nachprüfen

Entferne den Link auf fonts.googleapis.com vollständig. Danach: Seite neu laden und im Entwicklerwerkzeug des Browsers unter „Netzwerk“ nach „google“ filtern. Es darf kein Treffer mehr auftauchen.

Und die Lizenz?

Die meisten Google Fonts stehen unter der SIL Open Font License und dürfen selbst gehostet werden. Prüfe die Lizenz der konkreten Schrift, bevor du sie ausrollst.