Inhaltsverzeichnis

Moderne Nutzung von Web-Fonts

In den letzten Jahren (genauer: Browser seit 2015, Betriebssysteme seit 2017) haben sich die Möglichkeiten zur Nutzung von Fonts in HTML weiter verbessert. Die effektive und rechtlich einwandfreie Nutzung soll hier vorgestellt werden.

Problemstellung

Zum Design eigener Dokumente (ob Web oder auf Papier) gehört die Gestaltung mit selbst gewählten Fonts. Diese können in HTML recht problemlos festgelegt werden. Da man beim Betrachter nicht voraussetzen kann, dass der eigene Wunschfont installiert ist, verwendet man Web-Fonts, die über das Internet geladen werden.

1. Seit Jahren werden freie Fonts erfolgreich und zentral von Google zur Verfügung gestellt.

2. Zu jeder Fontfamilie (das, was wir mit einem Namen kennzeichnen, z.B. „Open Sans“) gehören verschiedene Font-Dateien um jede gewünschte Darstellungsart erreichen zu können. Diese werden erst einmal für normal/italic und andererseits für verschiedene Dicken der Zeichen („weight“) benötigt. Google unterteilt die Dateien außerdem nach Zielgruppen, d.h. welche Zeichen enthalten sein sollen, in „latin“, „latin-ext“, „greek“ und einige weitere. Diese Dateien gibt es außerdem jeweils in verschiedenen Formaten für ältere und neuere Browser. Will man also Open Sans in dünn, normal, fett und ultrafett sowie dasselbe in italic, mit drei Datei-Varianten (ttf, woff, woff2), so handelt es sich bereits um 24 Dateien, ohne dass man sich um den Zeichenumfang gekümmert hat. Kein Wunder, dass die Meisten die Arbeit Google überlassen. Diese lässt sich heutzutage aber deutlich reduzieren!

Idee

Eine realistische Abschätzung zeigt, dass man fast nur noch mit aktuellen Browsern rechnen muss. Diese unterstützen alle das moderne woff2-Font-Dateiformat. Exotische Browser (IE11 mit <0,5% Anteil) sowie Betriebssysteme in Versionsständen vor Ende 2017 müssen dann mit einem falschen Font leben. Probleme scheint es z.B. mit Firefox auf alten Windowsversionen (7, 8.1) zu geben1). Letztere verabschieden sich glücklicherweise final im Januar 20232).

Das woff2-Format ermöglicht „variable Fonts“3)4)5). Welche es bereits gibt kann Google Fonts gefiltert auflisten. Sofern einem diese Fonts reichen und man mit den wenigen nicht modernen Browsern leben kann gelten die folgenden Ausführungen:

Damit sind mehrere Probleme gelöst:

Bonus: HTTP/2 ermöglicht, dass die Fonts auf demselben Server über dieselbe Session - auch interleaved - übertragen werden. Solange dein Server nicht an sich lahm ist, sollte damit der Abruf sehr schnell sein! Prüfe, ob dein Anbieter bereits HTTP/2 (nur via HTTPS möglich) nutzt!

Praxis

Was benötigen wir?

WOFF2-Datei besorgen

In Stichpunkten um „regular“ und „italic“ zu erhalten:

Ablage auf dem Webserver

.htaccess
<FilesMatch "\.(woff2)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

CSS-Schnipsel

    @font-face {
        font-family: 'EB Garamond';
        font-style: normal;
        font-weight: 400 800;
        font-display: swap;
        src: url(https://example.de/fonts/EB_Garamond.woff2) format("woff2 supports variations"),
             url(https://example.de/fonts/EB_Garamond.woff2) format("woff2-variations");
    }
    @font-face {
        font-family: 'EB Garamond';
        font-style: italic;
        font-weight: 400 800;
        font-display: swap;
        src: url(https://example.de/fonts/EB_Garamond_Italic.woff2) format("woff2 supports variations"),
             url(https://example.de/fonts/EB_Garamond_Italic.woff2) format("woff2-variations");
    }
    body { font-family: sans-serif; }
    h1, h2, h3 { font-family: "EB Garamond";}
    h1 {font-weight: 800;}
    h2 {font-style: italic;}

HTML-Beispiel

    <H1>Garamond in GROSS</H1>
    <p>Und etwas Text</p>
    <H2>Garamond in kursiv</H2>
    <p>Etwas Text</p>
    <H3>Garamond in mittel</H3>
    <p>Etwas Text</p>
    <H4>Kein Garamond</H4>
    <p>Der letzte Text</p>
, , , , , ,
1)
DE: https://www.heise.de/blog/Variable-Fonts-und-wie-man-sie-nicht-einsetzen-sollte-7142196.html
2)
EN: https://learn.microsoft.com/de-de/lifecycle/products/windows-81
3)
DE: https://www.typolexikon.de/variable-fonts/
4)
EN: https://en.wikipedia.org/wiki/Variable_font
5)
EN: https://fonts.google.com/knowledge/using_variable_fonts_on_the_web