Eine moderne Schrift-Familie hat oft neun Gewichtungen, jeweils in regular und italic — also 18 einzelne Dateien. Variable Fonts packen das alles in eine einzige Datei. Mit cleverer Achsen-Steuerung lassen sich daraus beliebige Zwischenstufen ableiten.
Was ist eine Variable Font?
Statt zehn statische Strichstärken („Light 300″, „Regular 400″, „Bold 700″…) enthält eine Variable Font eine kontinuierliche Achse von 100 bis 900. Im CSS wählst du jeden beliebigen Wert dazwischen.
@font-face {
font-family: "Inter";
src: url("/assets/fonts/inter-variable.woff2") format("woff2-variations");
font-weight: 100 900;
font-display: swap;
}
.headline { font-weight: 720; } /* nicht 700, nicht 800 — exakt 720 */Wann lohnt es sich?
- Performance: Eine Variable-Datei für alle Stile ist meist kleiner als drei statische Dateien.
- Design: Du bekommst feinkörnige Kontrolle, ohne zusätzlichen HTTP-Request.
- Wartung: Eine Datei statt vieler — weniger Asset-Management.
Browser-Support
Alle modernen Browser unterstützen Variable Fonts seit 2018/2019. Bei Safari und Firefox ist das gut etabliert; in Chrome/Edge sowieso. Für Internet Explorer 11 nutze einen statischen Fallback.
Praktische Schrift-Wahl
Drei in der Praxis bewährte Variable-Fonts mit freundlicher Lizenz für lokale Einbindung:
- Inter — UI-Klassiker, lesbar bei kleinen Größen.
- Source Sans 3 — neutrale Sans für Editorial-Layouts.
- Recursive — vielseitige Sans/Mono-Hybridfamilie.
Alle drei stehen unter SIL Open Font License und können bedenkenlos lokal gehostet werden.
Drittdienste auch nach der Schrift-Umstellung sauber blocken
Lokale Schriften lösen das Schrift-Problem. Karten, Videos, Marketing-Pixel und Page-Builder schaffen morgen die nächste Lücke. Mit Consenta blockst du nicht-essentielle Drittdienste automatisch — bis zur Einwilligung.