Moderne Web-Fonts

2024-06-27

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 stellt Google freie Fonts erfolgreich und zentral zur Verfügung.

  2. Zu jeder Fontfamilie (das, was wir mit einem Namen kennzeichnen, z.B. "Open Sans" oder "Arial") 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. Der Aufwand lässt sich heutzutage aber deutlich reduzieren!

Idee

Mit einer Kombination aus modernem Betriebssystem und leidlich aktuellem Browser kann man variable Fonts nutzen! Ignoriert man alte Systeme, so verringert sich der Aufwand deutlich.

Dies ist legitim:

Der Clou: Das woff2-Format ermöglicht “variable Fonts”123.
Dies bedeutet, dass man i.d.R. keine gtrennten Dateien für schmal, normal und fette Schrift braucht, sondern dies aus einer Datei korrekt errechnet wird (in CSS festgelegt).
Welche Fonts es bereits gibt, kann Google Fonts gefiltert auflisten. Sofern einem diese Fonts genügen, gelten die folgenden Ausführungen:

Damit sind mehrere Probleme gelöst:

Bonus 1: 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 imzwischen HTTP/2 (nur via HTTPS möglich) nutzt!

Bonus 2: Mit einem Preload kann man eine (Font-)-Datei sehr früh im Seitenaufbau übertragen lassen. Diese ist im Fall von variablen Fonts bereits sehr weit nutzbar.

Praxis

Was benötigen wir?

WOFF2-Datei besorgen

In Stichpunkten um "regular" und "italic" zu erhalten:

Screenshot BieC

Ablage auf dem Webserver

<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>

Preload

Für “Bonus 2”:

<link
      rel="preload"
      as="font"
      crossorigin="anonymous"
      href="https://example.de/fonts/OpenSans.woff2"
      type="font/woff2"
>

  1. DE: https://www.typolexikon.de/variable-fonts/↩︎

  2. EN: https://en.wikipedia.org/wiki/Variable_font↩︎

  3. EN: https://fonts.google.com/knowledge/using_variable_fonts_on_the_web↩︎