LF 10a: Benutzerschnittstellen: Exkurs: Web Fonts

rüher waren Webdesigner gezwungen, ihre Auswahl an Schriften auf die auf den meisten Computern üblichen standardisierten Schriftarten zu beschränken, um die Kompatibilität mit einer möglichst großen Zahl von Computersystemen zu gewährleisten, auf denen diese Schriftarten installiert sind.

eute ist die Verwendung von Web-Schriften ist weit verbreitet, denn mit der CSS3-Anweisung @font-face wird eine nicht standardisierte Schriftart mit der Seite heruntergeladen. So hat eine Webseite auf allen Geräten die gleiche Typografie (Gestaltung mittels Schrift, Bildern, Linien, Flächen und Leerräumen usw), d.h. die Webseite sieht überall gleich aus.

Lizensierung von Schriftarten

So entstanden eine Reihe von Webfont-Diensten, wie z.B. Adobe Fonts (ehemals Typekit). Dieser Online-Dienst bietet den Abonnenten im Rahmen eines Lizenzvertrags Zugang zu seiner Schriftartenbibliothek an Die Schriftarten können direkt auf Websites verwendet oder über Adobe Creative Cloud mit den Anwendungen auf den Computern der Abonnenten synchronisiert werden.

Allerdings sind diese Angebote meist kostenpflichtig. Die Qualität und die Vielfalt der Schriften der kostenpflichtigen Anbieter sind verständlicherweise viel besser als das, was man kostenlos erhalten kann. Aber Google Fonts bietet völlig kostenlose, ordnungsgemäß lizenzierte nicht standardisierte Schriftarten für die Benutzung auf Webseiten an, die viele typgrafische Möglichkeiten eröffnet:

Google Font: Auswahl der Schriftart

"Dynamische" Einbindung der Schriftarten

"Dynamischer Einbindung" heißt, der Browser lädt die Web Schriften ganz einfach vom Anbieter herunter:

Nach der Auswahl der Schriftart wird der Code generiert, der im Head der Webseite die Schriftart einbindet (unten rechts im obigen Bild). Dabei gibt es zwei Möglichkeiten:

Stylesheet-Link im Head der HTML-Datei

Beispiel:

HTML

<head>
    ...
    <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=Roboto:wght@100&display=swap" rel="stylesheet">
    ...
</head>

CSS

font-family: 'Roboto', sans-serif;

Der empfohlene Parameter display=swap bewirkt, dass die Seite mit der Standardschrift des Browser geladen gerendert wird, wenn die Schrift noch nicht fertig heruntergeladen wurde (Flash-Text ohne Formatierung). Steht die Schrift dann dem Browser zur Verfügung wird ein 2. Mal, also neu gerendert.

CSS @import-Regel

HTML

<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
</style>

CSS

font-family: 'Roboto', sans-serif;

DSGVO

Diese oben beschriebene "dynamische" Einbindung der Google-Schriftarten hat technisch zwingend zur Folge, dass auf den Google-Servern die IP-Adresse des Aufrufers der Webseite bekannt wird, denn sonst könnte die Schriftart nicht zum Webclient, dem Browser ausgeliefert werden.

Das Landgericht München entschied in seinem Urteil vom 20.01.2022 (3 O 17493/20), dass die Weitergabe der dynamischen IP-Adresse von Nutzern an den US-Anbieter „Google“ im Rahmen der Nutzung von „Google Fonts“ gemäß Art. 6 Abs. 1 lit. a DSGVO ohne Einwilligung des Nutzers unzulässig ist. Auch ein mögliches „berechtigtes Interesse” nach Art. 6 Abs. 1 f) DSGVO wurde in diesem Urteil ausgeschlossen. Das Gericht sprach dem Kläger neben einem Unterlassungsanspruch auch einen Schadensersatzanspruch aus Art. 82 Abs. 1 DSGVO in Höhe von 100 € zu. Der Schadensersatzanspruch begründet sich mitunter durch den wahrgenommenen Kontrollverlust und das empfundene Unwohlsein des Klägers in Verbindung mit der Datenweitergabe an Google.

https://www.datenschutzexperte.de/blog/datenschutz-im-unternehmen/google-fonts-und-die-dsgvo-das-muessen-sie-nach-dem-urteil-wissen/ (22.11.2022)

"Statische" bzw. "lokale" Einbindung der Schriftarten

Um keine Abmahnung zu riskieren, sollte die Schriftart "statisch" also "lokal" eingebunden werden, d.h. die Schriftart wird direkt auf dem Webserver übertragen und von dort ausgeliefert. Die Einbindung in der Webseite lädt die Schriftart, also vom eigenen Server. Google ist nicht mehr involviert. Dieser Abmahnungsgrund liegt damit nicht vor.

Zwei Vorteile

Neben besserem Datenschutz unterstützen lokal gehostete Schriftarten auch das Browser-Caching optimal. (Font-Anbieter verhindern Browser-Caching, damit aktualisierte Schriftarten auch direkt ausgeliefert werden.)

Google Font selbst hosten

Mit dem "Download all"-Button können die zuvor ausgewählten Schriftarten als ZIP-Datei heruntergeladen werden. Alternativ kann das auch aus der Detailansicht mit "Download Family" getan werden.

Gezippte Schriftart "Roboto"
Gezippte Schriftart "Roboto"

Google bietet seine Schriftarten nur im TTF- oder OTF-Format (TrueType- und OpenType-Format) zum Download an. Zwar könnte man eine Einbindung auch in diesen Formaten direkt vornehmen, um aber Bandbreite und Download-Zeit zu sparen, wird das Kompressionsformat WOFF bzw. WOFF2 (Web Open Font Format) verwendet. Letzteres hat eine Kompressionsrate von ca. 3:1. Es gibt verschieden Tools für die Konvertierung dieser Schriftarten in das WOFF/WOFF2-Format, wie z.B. den google webfonts helper (google-webfonts-helper.herokuapp.com).

Der Google Webfonts Helper bietet Download für die Dateien an und den passenden CSS-Code für Ihre Website. Man hat für den CSS-Code die Wahl zwischen den Optionen „Modern Browser“ und „Best Support“. Für moderne Browser werden nur WOFF2 und als Fallback WOFF ausgeliefert. Für alte Browser sind noch zusätzlich TTF sowie SVG aufgeführt.

Hier der CSS-Code beispielhaft für moderne Browser:

/* roboto-100 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local(''),
       url('fonts/roboto-v30-latin-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('fonts/roboto-v30-latin-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

WOFF/WOFF2-Dateien

Variable Web Fonts

Üblicherweise gibt es für jeden Schriftschnitt eine eigene Fonts-Datei, also etwa eine für den normalen Schnitt (Regular), eine weitere für fett (Bold) und so weiter. Hinzu kommen Dateien für Kombinationen wie fett-kursiv (Bold-Italic). Unter Umständen müssen also so mehrere Schriftarten vom Browser heruntergeladen werden.

Zwei Vorteile

Eine performantere Methode und flexiblere Methode bietet die Verwendung von variablen Schriftarten. Dabei wird eine einzige OpenType-Schriftdatei mittels sogenannter Achsen (Axis) stufenlos parametrisiert. Dies betrifft z.B. Größe, Strichstärke, Grad der Schräglage, Zeichenbreite usw.

Weitere Informationen: https://web.dev/variable-fonts/ (24.11.2022)

So wird's gemacht

Leider ist mir bislang die Erzeugung von WOFF-Dateien mit allen variablen Parametern aus der heruntergeladenen TTF-Datei bei variablen Fonts mit keinem von mir getesteten Online-Tool gelungen. Mit folgender Vorgehensweise lädt man daher die WOFF2-Datei direkt bei Google herunter:

https://fonts.google.com/ aufrufen
Flexible Schrift suchen und auswählen (z.B. Roboto Flex)
Styles auswählen
Bei Bedarf: Type tester aufrufen, um Parameter zu prüfen
Use on the web: @import wählen und URL kopieren
Kopierte URL in neuem Browsertab öffnen
Font face latin suchen und URL auf WOFF2-Datei kopieren
URL in neuem Browsertab öffnen und WOFF2-Datei herunterladen
WOFF2-Datei in praktikablere Bezeichnung umbenennen
WOFF2-Datei auf eigenen Server hochladen
WOFF2-Datei in CSS einbinden z.B. so:

@font-face {
  font-family: 'Roboto Flex';
  font-weight: 100 1000;
  src: local('Roboto Flex'),
      url('/static/fonts/roboto-flex.woff2') format(woff2) tech(variations);  
}

body {
  font-family: 'Roboto Flex', sans-serif;
  font-weight: 400;
}

h1 {
  font-weight: 100;
  font-size: 3.4em;
}

font-weight kann bei Roboto Flex nur die Werte 100 bis 1000 annehmen, daher werden Minima und Maxima hier definiert, damit werden etwaige weitere Definitionen unterhalb oder oberhalb dieser Grenzen auf diese gesetzt.

Weitere Quellen:

Schöne Schriften | c't | Heise Magazine - https://www.heise.de/select/ct/2022/21/2224509084837524407 (24.11.2022)

Last modified: Thursday, 24 November 2022, 10:43 AM