Moderne Web-Fonts

Vor ca. zehn Jahren haben sich die technischen Möglichkeiten zur Nutzung von Fonts in HTML weiter verbessert. Die effektive und rechtlich einwandfreie Nutzung soll hier vorgestellt werden.
Aktualisiert mit deutlicher Vereinfachung!

Zum Design eigener Dokumente (ob Web oder auf Papier) gehört die Gestaltung mit selbst gewählten Fonts. Diese können in HTML 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.

Idee

Variable Fonts ermöglichen mit weniger Dateien die Ziele flexibler Typographie zu erreichen. Dazu ist eine Kombination aus halbwegs modernem Betriebssystem und leidlich aktuellem Browser nötig! Ignoriert man also veraltete Systeme, so verringert sich der Aufwand deutlich.

Der Clou:
Das woff2-Format ermöglicht “variable Fonts”¹ ² ³.
Dies bedeutet, dass man i.d.R. keine getrennten Dateien für schmal, normal und fette Schrift braucht, sondern diese Schnitte typographisch korrekt aus einer einzigen Datei errechnet werden (über CSS gesteuert).
Welche Fonts es bereits gibt, kann Google Fonts gefiltert auflisten. Sofern einem diese Fonts genügen, gelten die folgenden Vorschläge:

Ist es legitim “uralte” Systeme zu ignorieren?

Eine realistische Abschätzung zeigt, dass fast alle benutzten Browser variable Fonts im woff2-Format unterstützen. Einzige Ausnahme sind ca. 0,4% Nutzer des bereits 12 Jahre alten IE11. Ob dies echte Desktops sind ist fraglich.
Flexible Fonts gelten als “Baseline, widely availible”, also quasi überall verfügbar. Kriterium dazu ist, dass ein Feature seit 2,5 Jahren in allen relevanten Browsern verfügbar ist.
Betriebssysteme mit Versionsständen nach Ende 2017 sind ebenfalls Voraussetzung. Ältere Betriebssysteme werden längst nicht mehr supportet und sollten wegen fehlender Updates genauso lange nicht mehr im Internet genutzt werden.

Ergebnisse

Kleiner Nachteil: Eine Fontdatei mit recht vollständiger Abdeckung des Unicode-Zeichensatzes ist ca. 100 kByte groß. Google-Fonts würde erst einmal nur einen Teilbereich mit den benötigten Zeichen übertragen mit z.B. 20 kByte Größe. Dies allerdings von einem anderen als deinem Server über eine neue TLS-Session. Man hat dort also weniger Downloadvolumen, dafür mehr Latenzen. Relevant am ehesten im mobilen Sektor bei schlechter Verbindung.

Praxis

WOFF2-Datei besorgen

Ablage auf dem Webserver

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

CSS-Schnipsel

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

HTML-Beispiel

    <H1>Roboto in GROSS</H1>
    <p>Und etwas Text</p>
    <H2>Roboto in kursiv</H2>
    <p>Etwas Text</p>
    <H3>Roboto in mittel</H3>
    <p>Etwas Text</p>
    <H4>Kein Roboto</H4>
    <p>Der letzte Text</p>

Preload

Es empfiehlt sich, die Font-Datei, welche hauptsächlich benötigt wird, bereits parallel zur HTML-Datei zu laden. Ergänze dazu im head-Bereich der HTML-Datei:

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

Natürlich wird diese Datei im Browsercache abgelegt und nicht jedesmal geladen.

DE: https://www.typolexikon.de/variable-fonts/↩︎
EN: https://en.wikipedia.org/wiki/Variable_font ↩︎
EN: https://fonts.google.com/knowledge/using_variable_fonts_on_the_web ↩︎
Die Dateiformate TTF und WOFF2 unterscheiden sich hauptsächlich in Bezug auf die Dateigröße. Die Logik ist identisch, es findet kein Qualitätsverlust statt.↩︎
Hinter den Beschränkungen steht vermutlich die Angst vor Lizenzproblemen und ggf. Downloadvolumina. Da (vermutlich?) alle Google-Fonts freie Lizenzen haben, trifft das hier nicht zu. Kläre deine Lizenzen sicherheitshalber selbst!↩︎

Problemstellung