CSS: Welches Font Format nützt man im Jahr 2021 am besten?
Auf Webseiten kann man eigene Fonts einbinden und verwenden. Es gibt inzwischen unzählige Font Formate bzw. Typen. Wirklich relevant sind aber nur das woff2 Format (beziehungsweise dessen Vorgänger das woff Format).
Über die letzten Jahrzehnte hinweg kamen viele unterschiedliche Font Formate bzw. Typen im Webumfeld zum Einsatz. Aktuell sollte man nur mehr das woff2 Format verwendent. Wie hier zu sehen ist unterstützen inzwischen alle heutzutage relevanten Browser dieses Format.
Sollte man noch gezwungen sein den Internet Explorer unterstützen zu müssen, kann man auf das woff Format zurückgreifen. Dieses wird ab Internet Explorer 9 unterstützt.
WOFF vs WOFF2
Der größte Unterschied zwischen woff und woff2 liegt in der Art der verwendeten Kompression. woff benutzt ein Kompressionsverfahren das auf deflate basiert. woff2 verwendet ein Verfahren welches auf dem neueren und effizienteren brotli Algorithmus basiert.
Darüber hinaus erlaubt es woff2 einen Font in mehrere Dateien aufzusplitten. Das ist insbesonere bei Unicode Fonts welche mehrere Sprachen unterstützen hilfreich. In diesem Fall muss man dann nur die Unicode-Bereiche (Unicode ranges) laden welche man für die angefragte Sprachversion einer Webseite benötigt.
Fonts nutzen
<meta charset="UTF-8">
<head>
<title>Web Font Beispiel</title>
<style>
@font-face {
font-family: 'Mein toller Font';
src: url('./aldrich-v11-latin-regular.woff2') format('woff2'),
url('./aldrich-v11-latin-regular.woff') format('woff');
}
</style>
</head>
<body>
<p>Erster Absatz (kein Font angegeben).</p>
<p style="font-family:Mein toller Font">Zweiter Absatz (Mein toller Font).</p>
</body>
</html>
Der Webbrowser benutzt das erste Font Format das er unterstützt. Darum ist es wichtig woff2 vor woff anzuführen. Hier findest du weitere Details zur @font-face CSS Regel. Den Font aldrich-v11-latin-regular kannst du übrigens hier herunterladen.
Historischer Rückblick
EOT (Embedded Open Type)
Das eot Font Format wurde von Microsoft erfunden. Es handelt sich dabei um eine proprietäre Lösung. Dieses Font Format benötigte man nur für Internet Explorer Versionen welche älter als Version 9 waren. Alle aktuell relevanten Browser unterstüzten diesen Format nicht mehr.
TTF (TrueType Font) und OTF (OpenType Font)
ttf und otf sind Font Formate für Betriebssysteme. Man kann diese grundsätzlich auch im Webumfeld verwenden. Allerdings ist für diesen Anwendungsfall das woff bzw. woff2 Format besser geeignet. An dieser Stelle sei aber angemerkt das man sich woff / woff2 als Wrapper rund um ttf / otf Daten vorstellen kann.
SVG (Scalable Vector Graphics) Fonts
SVG hat mit Version 1.1 ein eigenes Font Format eingeführt. Damit ist es möglich einen Font rein mittels SVG Markup zu beschreiben. Im Vergleich zu anderen Font Formanten ist diese Lösung aber kompliziert und hat sich daher nie durchgesetzt. Mit der Version 2 von SVG wurde dieses eigene Font Format aus der SVG-Spezifikation wieder entfernt.
Übersicht Browserunterstützung
| Format | Format vollständig | Browserunterstützung |
|---|---|---|
| EOT | Embedded OpenType | caniuse |
| TTF/OTF | TrueType Font / OpenType Font | caniuse |
| WOFF | Web Open Font Format | caniuse |
| WOFF2 | Web Open Font Format 2 | caniuse |
| SVG Fonts | Scalable Vector Graphics fonts | caniuse |