02.05.2023

Google Fonts lokal einbinden

Ein kurzer Überblick über die technische Einbindung von Google Fonts auf dem eigenen Server, Konvertierung, Fallback-Schriften und Optimierung.

Datenschutz beachten

Um eine Webseite attraktiver und lesbarer zu machen, können Google Fonts verwendet werden. Dabei müssen jedoch Datenschutzregeln eingehalten werden.

Gemäß der Datenschutz-Grundverordnung (DSGVO) dürfen personenbezogene Daten nur dann verarbeitet werden, wenn es rechtlich zulässig ist. Werden die Schriften vom Google-Font-Server geladen, wird jedoch bei jeder Verbindung zum Google-Server die IP-Adresse des Nutzers übermittelt. Die IP-Adresse wird als personenbezogene Daten betrachtet, da sie zur Identifizierung einer Person verwendet werden kann.

Werden Google Fonts lokal auf der Webseite eingebunden, sind sie auf dem eigenen Server gespeichert, somit wird vermieden, dass die IP-Adresse des Nutzers zum Google-Server übermittelt wird.

Weiterhin muss beachtet werden, ob die Lizenz der ausgewählte Schrift für Verwendung gültig ist. Die meisten Google Fonts sind kostenlos für die Verwendung auf Websites verfügbar, aber es gibt einige Ausnahmen, die eine kostenpflichtige Lizenz erfordern.

Konvertierung des Schriftformats von TTF nach WOFF2

  1. Lade die gewünschte Schrift (TTF-Datei) vom Google-Server herunter
  2. Prüfe ob die Lizenz eine Umwandlung in das WOFF2-Format erlaubt
  3. Wandle die TTF-Datei in eine WOFF2-Datei um (unterstützte Browser des WOFF2-Formats). Die Umwandlung kann online per Fontsquirrel erfolgen. Möchte man variable Schriftarten in WOFF2 umwandeln, empfiehlt sich die Google Font WOFF2-Bibliothek. Eine ausführliche Beschreibung der Konvertierung findet man bei henry.codes.

Fallback-Schriften definieren

Damit die Webseite unabhängig von technischen Problemen lesbar bleibt, sollten alternative Schriftarten definiert werden. Diese werden in der Reihenfolge der Priorität angezeigt werden, wenn die primäre Schriftart nicht geladen werden kann. Als alternative Schriften werden Systemschriften ausgewählt, die ähnliche Serifen, Sans-Serifen, Schriftgrößen und Schriftbreiten haben, um ein konsistentes Erscheinungsbild zu gewährleisten. Je nach Betriebssystem gibt es verschiedene Systemfonts (Microsoft 11 Systemschriften, Apple Systemschriften, Android Roboto/Noto, Beispiele Antiqua/Grotesk/Diktengleiche)

Noto – Eine Abkürzung für „no tofu“, da das Google-Font-Projekt darauf abzielt, „Tofu“ zu eliminieren. „Tofu“ sind leere Rechtecke, die angezeigt werden, wenn in der Sprache kein Zeichen (Glyphe) verfügbar ist.

Fallback-Schriften optimieren

Um den FOUC (Flash of Unstyled Content), der Inhalt der Webseite wird kurzzeitig ohne das gewünschte Styling dargestellt, zu minimieren, können die alternativen Schriftarten optimiert werden.

Die font-Standardattribute können mit dem Font style matcher getestet werden.

Mit dem Überschreiben der Font-Metrik, können die Versalhöhe, Unterlängen und Zeilendurchschuss angepasst werden (ascent-override, descent-override, line-gap-override).

size-adjust skaliert die Breite und Höhe von Schriftartglyphen proportional.

Ladezeit optimieren

Sind Google Fonts lokal eingebunden und mit preload referenziert, kann der Browser sofort mit dem Herunterladen der Schriftart beginnen, nachdem er den ersten HTML-Code empfangen hat. Dies bedeutet, dass die Webschrift viel wahrscheinlicher verfügbar ist, wenn der Browser Text darstellt.

Links