Ein Font-Fallback-Stack ist die Liste von Schriften, die in der CSS-Eigenschaft font-family steht. Laut CSS Fonts 4 ist sie eine nach Priorität geordnete Liste von Schriftnamen und generischen Familien. Der Browser geht sie durch, bis er eine verfügbare Schrift findet, die das jeweilige Zeichen enthält.
- Font-Fallback-Stack
Die Liste von Schriften in font-family, die der Browser der Reihe nach probiert, bis er eine findet, die das Zeichen enthält.
Beispiel: „Unser Font-Fallback-Stack beginnt mit der Webschrift und endet mit sans-serif.“Auch: Font Stack, Schriftstapel.
Abgrenzung zu @font-face: Es lädt eine Schrift, der Stack legt die Reihenfolge fest.
Wie der Browser einen Font-Fallback-Stack abarbeitet
Die Auswahl läuft Zeichen für Zeichen. Fehlt in der ersten Schrift etwa ein Emoji oder ein Buchstabe einer anderen Schrift, nimmt der Browser für dieses Zeichen die nächste Schrift der Liste, den Rest des Textes nicht. Die Spezifikation ermutigt, als letzten Eintrag eine generische Familie wie serif, sans-serif oder monospace zu setzen; für diese drei muss der Browser immer eine Schrift haben.
body {
font-family: "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
}system-ui im Font-Fallback-Stack
Die generische Familie system-ui nutzt die Schrift der Bedienoberfläche des Systems. Laut Google Fonts ist das Segoe auf Windows, San Francisco auf macOS und Roboto auf Android. Seit März 2024 ist system-ui in allen großen Browsern weit verfügbar und eignet sich als Ersatz, solange die Webschrift lädt.
Layoutsprünge im Font-Fallback-Stack vermeiden
Weil Ersatz- und Webschrift verschieden breit und hoch sind, springt der Text beim Wechsel. Dagegen helfen Deskriptoren in @font-face: size-adjust skaliert eine lokale Ersatzschrift, ascent-override und descent-override gleichen Ober- und Unterlänge an. size-adjust ist seit 2026 weit verfügbar, die override-Deskriptoren fehlen laut web-features noch in Safari.
@font-face {
font-family: "Inter Ersatz";
src: local("Arial");
size-adjust: 107%;
}