Moderne Web-Fonts

2025-04-27

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!

Problemstellung

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.

  1. Google stellt freie Fonts seit längerem erfolgreich und zentral zur Verfügung.

  2. Dateienzahl: 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 selbst 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 Webdesigner die Arbeit Google überlassen. Dieser Aufwand lässt sich inzwischen aber deutlich reduzieren!

Idee

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

Der Clou:
Das woff2-Format ermöglicht “variable Fonts”1 2 3.
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:


Warum ist es legitim, die alten 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.
  • 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.

Damit sind mehrere Probleme gelöst:

Dazu kommt als Bonus:

Praxis

Was benötigen wir?

WOFF2-Datei besorgen

In Stichpunkten (neues Vorgehen 2025):

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

Für den Bonus, dass die Datei, welche hauptsächlich benötigt wird, bereits parallel zur HTML-Datei geladen wird. Ergänze 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.

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

  4. Die Dateiformate TTF und WOFF2 unterscheiden sich hauptsächlich in Bezug auf die Dateigröße. Die Logik ist identisch, es findet kein Qualitätsverlist statt.↩︎

  5. 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!↩︎