Google Fonts – datenschutzkonform und sparsam einsetzen

Webfonts und der Datenschutz

Google Webfonts gehören zweifellos zu den Lieblingsdiensten der Webdesigner. Alles war so wunderbar einfach, denn wir brauchten nur ein paar Klicks, mussten keinen Account anlegen und das Angebot der Schriften ist schier überwältigend.

Die Schriften werden bei Google gehostet – bei jedem Zugriff auf die Webseite bekommt Google Informationen über den Nutzer – seine IP-Adresse. Der bequeme Einsatz der Fonts gilt als nicht datenschutzkonform und braucht die aktive Einwilligung des Besuchers.

Die Lösung heißt: die Schriftfamilie herunterladen und auf dem eigenen Webspace installieren. Den Download gab es schon seit vielen Jahren per Google Font Helper. Inzwischen bietet Google die Schriftdateien selber direkt als Download an.

Now baby Arial is not enough

Eine Schrift für Webseiten ist nicht genug: Wir brauchen Schriftfamilien mit Schriftschnitten von dünn bis fett, normal bis italic.

Google Webfonts stehen unter einer Open-Source-Lizenz und waren über Jahre die bevorzugte Methode, einen Webfont in Webseiten einzubinden. Ein großer Teil der Fonts besteht aus mehr als den vier Schnitten Normal, Fett, Kursiv und Kursiv-Fett. Feinere Schnitte mit font-weight 300 und mittelstarke Schnitte mit font-weight 500 oder 600 bereichern die Auswahl und sind auf den meisten Monitoren besser lesbar als Normal oder das gewichtige Fett mit font-weight 700.

Variable Fonts

Während früher jeder Stil als separate Datei geladen wurde, liefern variable Fonts alle Variationen in einer Datei. Wo zuvor schon reguläre und fette Schnitte mitsamt ihren kursiven Variationen schnell auf eine Last von 500 KB kamen, kombinieren variable Fonts bestimmte Merkmale wie die Breite und dem Webdesigner stehen z.B. alle Schnitte von 100 bis 900 zur Verfügung.

Variable Schriften werden von allen immergrünen Browsern unterstützt (nicht IE11 – muss man eigentlich gar nicht erst betonen).

Fonts datenschutzkonform einbinden

Mit dem klassischen Weg, einen Font einzubinden, wurden die Links zum Font im Header der Seite eingebunden.

<link rel="preconnect" href="https://fonts.googleapis.com"> 
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&family=Open+Sans:ital,wght@0,300;0,400;0,600;1,400&display=swap" rel="stylesheet">

Um datenschutzkonform zu bleiben und die IP-Adresse des Besuchers nicht weiterzugeben, bietet Google Font den Download der Schriftdatei. Dabei landet zwar ein Paket von rund 2 bis 6 MB, aber für diesen variablen Font werden nur zwei der Schriftdateien (mit je 580KB) benötigt.

  OpenSans-VariableFont_wdth,wght.ttf
  OpenSans-Italic-VariableFont_wdth,wght.ttf

Mit diesen beiden Dateien stehen sämtliche Schriftgewichte sowohl für reguläre als auch für kursive Schrift zur Verfügung.

Der Link zum Font per font-face-Regel geht in die CSS-Datei oder ein style-Tag im Kopf der der Seite, insbesondere aber immer vor dem ersten <script>-Tag. Danny Cooper erklärt im Smashing Magazine, wie man Google Fonts mit minimalen Ladeaufwand einsetzt.

@font-face {
	font-family: "OpenSans";
	src: url("fonts/OpenSans-VariableFont_wdth,wght.ttf") format("woff2-variations");
 	font-display: swap;
}

So ganz ohne kleine Einschränkungen geht die Post mit dem Webfont allerdings nicht ab. Wenn Safari, Chrome und Internet Eplorer den Font-Link entdecken, rendern sie den Rest der Seite, aber bis der Font geladen ist, zeigen sie Weißraum.

Firefox hingegen zeigt den Text zunächst einmal im voreingestellten Font und berechnet die Seitendarstellung erneut, sobald der Webfont geladen ist. Diesen Effekt nennt man auch “Flash Of Unstyled Text”. Den wiederum soll -display: swap verhüten.

Sparsamer Einsatz von Fonts

Natürlich braucht nicht jeder für jede Webseite variable Fonts. Nicht nur, um die Ladezeit der Webseite in Zaum zu halten, sondern einem aufgeräumten Design und Layout zuliebe bleiben die statischen Fonts die Grundlage.

TTF kann als erweiterter Support für ältere Browser – speziell auf mobilen Geräten angesehen werden. WOFF komprimiert die Schriftdateien und wird von allen modernen Browsern unterstützt. WOFF2 ist ein Update von WOFF und komprimiert Schriften am besten.

EOT ist für die ganz alten Schätzchen (IE8 und älter) und kann unter den Tisch fallen. Auch SVG dient zur Stützung von Uraltbrowsern und wird nicht mehr gebraucht.

Externe Quellen

• Your privacy and Google Fonts Google zum Datenschutz beim Einsatz von Google-Fonts
• google-webfonts-helper Google Web Fonts selber hosten
• Adobe Typekit and Edge Web Fonts
• Munter / Subfont ist ein Kommandozeilen-Werkzeug, das Webseiten analysiert, um die optimale Webfonts zusammenzustellen.