Mit @font-face lassen sich eigene Schriften in eine Website einbinden, statt sich auf die Schriften zu verlassen, die auf dem Rechner des Besuchers zufällig installiert sind. Die Technik ist alt, aber die richtige Vorgehensweise hat sich in den letzten Jahren deutlich verändert. Wer noch nach Anleitungen von damals arbeitet, schleppt Dateien mit, die niemand mehr braucht.
Ein Format genügt: woff2
Früher musste man dieselbe Schrift in vier oder fünf Formaten ausliefern, damit sie überall ankam. Das ist vorbei. woff2 wird von allen aktuellen Browsern unterstützt und ist zugleich das am stärksten komprimierte Format.
Nicht mehr nötig sind:
- EOT – war ausschließlich für den Internet Explorer gedacht, der seit 2022 abgekündigt ist
- SVG-Schriften – aus allen Browsern entfernt
- TTF und OTF – funktionieren zwar, sind aber deutlich größer als woff2
- WOFF (die erste Fassung) – nur relevant, wenn sehr alte Browser bedient werden müssen
Der Code
@font-face {
font-family: "Inter";
src: url("/fonts/inter-var.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
body {
font-family: "Inter", system-ui, sans-serif;
}font-display: swap
Diese eine Zeile entscheidet darüber, was der Besucher in den ersten Sekundenbruchteilen sieht. Ohne sie halten viele Browser den Text zurück, bis die Schrift geladen ist, und die Seite bleibt kurz leer. Mit swap wird sofort in einer Systemschrift gezeichnet und nachträglich umgestellt. Der Text springt dabei einmal, aber er ist von Anfang an lesbar.
Immer eine Ersatzschrift angeben
Die Liste hinter font-family ist kein Beiwerk. Fällt die Datei aus, greift der nächste Eintrag. system-ui nimmt die Schrift des jeweiligen Betriebssystems und sieht auf jedem Gerät passend aus.
Variable Schriften: eine Datei statt sechs
Klassisch braucht man je eine Datei für Normal, Fett, Kursiv und jede weitere Stärke. Eine variable Schrift enthält den ganzen Bereich in einer einzigen Datei. Im Beispiel oben deckt font-weight: 100 900 alle Stärken von Haarlinie bis Schwarz ab.
Das spart in der Regel nicht nur Dateigröße, sondern vor allem Anfragen an den Server. Diese Website nutzt zwei variable Schriften und lädt dafür zwei Dateien.
Warum ich Schriften selbst ausliefere
Der bequeme Weg wäre, Google Fonts direkt von Googles Servern einzubinden. Genau davon rate ich ab. Beim Aufruf der Seite wird die IP-Adresse des Besuchers an Google übertragen, und zwar ohne dass er zugestimmt hat.
Das Landgericht München I hat darin am 20. Januar 2022 einen Verstoß gegen die Datenschutz-Grundverordnung gesehen und dem Kläger Schadensersatz zugesprochen (Az. 3 O 17493/20). Es handelt sich um ein Urteil eines Landgerichts, nicht um höchstrichterliche Rechtsprechung, und die anschließende Abmahnwelle war in Teilen selbst zweifelhaft. Für die Praxis ändert das wenig: Die Diskussion lässt sich vollständig vermeiden.
Der Ausweg ist einfach. Schrift herunterladen, in den eigenen Ordner legen, per @font-face einbinden. Es entsteht keine Verbindung zu einem fremden Server, und nebenbei lädt die Seite schneller, weil ein zusätzlicher Verbindungsaufbau entfällt.
Schrift früh laden
Damit der Umbruch möglichst früh passiert, lohnt sich ein Hinweis im Kopf des Dokuments:
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-var.woff2" crossorigin>Das crossorigin gehört zwingend dazu, auch bei Dateien vom eigenen Server. Fehlt es, lädt der Browser die Datei ein zweites Mal.
Woher die Dateien kommen
- google-webfonts-helper – lädt Google-Schriften als woff2 herunter und erzeugt das passende CSS gleich mit. Der schnellste Weg für alles, was bei Google Fonts liegt.
- Fontsquirrel Webfont Generator – wandelt eigene Schriftdateien um. Funktioniert weiterhin, erzeugt in der Standardeinstellung aber Formate, die niemand mehr braucht.
- Gekaufte Schriften – dort ist woff2 in der Regel bereits enthalten. Ein Blick in die Lizenz lohnt sich: Nicht jede Lizenz erlaubt die Nutzung im Web.
Kurz zusammengefasst
Nur woff2 ausliefern, font-display: swap setzen, eine Systemschrift als Rückfallebene angeben, wenn möglich eine variable Schrift nehmen und die Dateien auf dem eigenen Server halten. Damit ist das Thema erledigt.
