Google Fonts lokal einbinden in Joomla und WordPress

Google Fonts sind kostenlose Schriften von Google. Viele Templates, Themes und Page-Builder binden sie direkt vom Google-Server ein. Dann lädt der Browser jedes Besuchers beim Aufruf Ihrer Seite Dateien von fonts.googleapis.com und fonts.gstatic.com, und Google erhält dabei die IP-Adresse.

Das Landgericht München I sprach deshalb einem Besucher 100 € Schadensersatz zu (Urteil vom 20.01.2022, Az. 3 O 17493/20). Die Lösung ist einfach: Die Schriften kommen von Ihrem eigenen Server.

So prüfen Sie, ob Ihre Website Google Fonts lädt

1. Öffnen Sie Ihre Website in einem privaten Fenster.
2. Drücken Sie F12 und wählen Sie den Reiter „Netzwerk“.
3. Laden Sie die Seite neu und geben Sie in das Filterfeld fonts.g ein.
4. Erscheinen Einträge von fonts.googleapis.com oder fonts.gstatic.com, lädt die Seite Schriften von Google.

Prüfen Sie mehrere Seiten: Oft lädt nur eine Unterseite mit Karte, Formular oder Video die Schrift. Schneller geht es mit unserem kostenlosen Check: Er liest zuerst 5 Seiten und, wenn dort nichts auffällt, weitere.

Schriften herunterladen und einbinden

Die Schriften auf Google Fonts stehen unter freien Lizenzen, meist der SIL Open Font License. Sie erlauben, die Dateien selbst auszuliefern.

1. Laden Sie nur die Schnitte, die Ihre Seite wirklich nutzt, etwa normal und fett. Für Websites ist das Format WOFF2 am kleinsten; Werkzeuge wie google-webfonts-helper liefern WOFF2-Dateien samt passendem CSS.
2. Legen Sie die Dateien in einen Ordner Ihrer Website, zum Beispiel /fonts/.
3. Legen Sie in Ihrer CSS-Datei je Schnitt eine Regel an:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto-400.woff2') format('woff2');
}

Entfernen Sie danach die alte Einbindung, sonst lädt die Seite die Schrift doppelt.

Joomla

Cassiopeia, das Standard-Template

Unter System → Site Template Stile → Cassiopeia steht im Reiter „Erweitert“ das „Schriften-Schema“. Die Einträge „Fira Sans (web)“ und „Roboto + Noto Sans (web)“ laden von Google. „Roboto (local)“ und die Systemschriften kommen ohne fremden Server aus. Eigenes CSS mit @font-face gehört bei Cassiopeia in die Datei media/templates/site/cassiopeia/css/user.css, die das Template von selbst lädt.

YOOtheme Pro

Google Fonts, die Sie im Stil-Editor wählen, lädt YOOtheme Pro beim Speichern des Stils herunter und liefert sie von Ihrem Server aus. Prüfen Sie trotzdem: Eigenes CSS, Module und Plugins können Schriften weiterhin von Google laden.

Andere Templates und Erweiterungen

Viele Templates haben eine Einstellung für Google Fonts. Fehlt eine lokale Variante, schalten Sie die Google-Schrift dort aus und binden die Dateien wie oben über eine eigene CSS-Datei ein.

WordPress

Block-Themes und Schriftenbibliothek

Seit WordPress 6.5 gibt es im Website-Editor unter Stile → Typografie eine Schriftenbibliothek. Schriften, die Sie dort aus Google Fonts installieren, lädt WordPress herunter und liefert sie von Ihrem Server aus.

Klassische Themes und Page-Builder

Viele Themes und Page-Builder haben eine eigene Einstellung, um Google Fonts lokal zu laden oder abzuschalten. Wo sie fehlt, hilft ein Plugin, das Google Fonts erkennt und lokal speichert. Prüfen Sie danach im Netzwerk-Tab, dass wirklich keine Anfrage mehr an Google geht.

Häufige Stolperfallen

• Zwischenspeicher: Leeren Sie nach der Umstellung den Cache von Website, Optimierungs-Plugin und CDN, sonst liefert die Seite noch das alte CSS.
• @import im CSS: Manche Themes laden Google Fonts per @import in einer CSS-Datei. Das sehen Sie nur im CSS, nicht im HTML.
• Versteckte Einbindungen: Eingebettete Google-Karten, Kalender und Icon-Sets laden oft eigene Schriften nach.
• Adobe Fonts: Sie kommen von use.typekit.net, ebenfalls einem fremden Server. Prüfen Sie die Lizenz oder wechseln Sie auf eine freie Schrift.