Variable Fonts sind Schriftdateien, die alle Stärken, Breiten oder Neigungen einer Schrift stufenlos in einer einzigen Datei enthalten. Statt je einer Datei für Regular, Medium und Bold lädt die Website eine, aus der der Browser jede Zwischenstufe erzeugt. Eingeführt wurden sie 2016 mit OpenType 1.8.
- Variable Fonts
Schriftdateien, die alle Stärken, Breiten oder Neigungen einer Schrift stufenlos in einer einzigen Datei enthalten.
Beispiel: „Mit Variable Fonts laden wir eine Datei statt fünf Schnitten.“Auch: variable Schriften.
Abgrenzung zum Schriftschnitt: Er ist eine feste Variante. Ein Variable Font enthält alle Varianten einer Achse auf einmal.
Woher Variable Fonts kommen
Google, Microsoft, Apple und Adobe kündigten sie im September 2016 gemeinsam an. Microsoft schrieb die Spezifikation, Apple brachte seine ältere GX-Technik ein. Seitdem kennt OpenType fünf registrierte Achsen: Stärke (wght), Breite (wdth), Neigung (slnt), Kursive (ital) und optische Größe (opsz). Schriftgestalter dürfen eigene Achsen hinzufügen.
Variable Fonts in CSS
Angesprochen werden sie über die gewohnten Eigenschaften: font-weight steuert die Stärke, font-stretch die Breite. font-variation-settings ist laut MDN nur für Achsen gedacht, für die es keine eigene Eigenschaft gibt.
@font-face {
font-family: "Inter";
src: url("inter-var.woff2") format("woff2");
font-weight: 100 900;
}
h1 { font-weight: 650; }Was Variable Fonts bringen
Wer drei oder mehr Schnitte einer Schrift braucht, spart Anfragen und meist auch Datenmenge. Dazu kommen Zwischenstufen wie eine Stärke von 650, die es als festen Schnitt nicht gäbe. Alle aktuellen Browser unterstützen Variable Fonts seit Jahren, und Google Fonts bietet 565 seiner 1.959 Schriftfamilien als Variable Fonts an (Stand November 2026).