font-family
font-family legt fest, welche Schriftart für ein Element verwendet wird. Du gibst eine Reihe von Schriftnamen an, einen sogenannten Font-Stack, und der Browser nimmt die erste verfügbare Schrift. Am Ende steht immer eine generische Familie als Fallback, damit der Text auf jedem Gerät lesbar bleibt. Die Eigenschaft wird vererbt: Setzt du sie auf body, gilt sie für das gesamte Dokument. Von System-Fonts über Google Fonts bis hin zu selbst gehosteten Schriften: font-family ist der Ausgangspunkt für jede typografische Gestaltung.
- Syntax
- font-family: <family-name> [, <family-name>]* [, <generic-family>]
- Initialwert
- browserabhängig (meist eine Serifenschrift)
- Vererbt
- Ja
- Animierbar
- Nein
- Kategorie
- Typografie
- Werte
- 10
- Beispiele
- 5
- Browser
- 5 von 5
- 2 von 5
- Stand
- 15.02.2026
Grundlagen
Ein Font-Stack ist eine kommagetrennte Liste von Schriftnamen. Der Browser geht die Liste von links nach rechts durch und verwendet die erste Schrift, die auf dem System installiert ist oder als Web-Font geladen wurde. Deshalb stellst du deine Wunsch-Schrift an den Anfang und endest mit einer generischen Familie wie sans-serif oder monospace.
Schriftnamen, die Leerzeichen oder Sonderzeichen enthalten, müssen in Anführungszeichen stehen: "Open Sans", "Fira Code". Einwort-Namen wie Arial oder Georgia funktionieren auch ohne Anführungszeichen, generische Familien wie sans-serif dürfen sogar nie in Anführungszeichen stehen, sonst werden sie als konkreter Schriftname interpretiert.
Seit einigen Jahren gibt es system-ui, das automatisch die Standardschrift des jeweiligen Betriebssystems verwendet. Das ergibt eine native Optik und spart den Download einer Web-Font. Auf macOS bekommst du San Francisco, auf Windows Segoe UI, auf Android Roboto. Der System-Font-Stack ist heute die bevorzugte Wahl für viele Websites.
Syntax & Werte
10 WerteBeispiele
5 BeispieleEin typischer Font-Stack beginnt mit der bevorzugten Schrift, listet ähnliche Alternativen und endet mit der generischen Familie.
.sans {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.serif {
font-family: Georgia, "Times New Roman", Times, serif;
}
.mono {
font-family: "Fira Code", "Cascadia Code", Consolas, monospace;
}<div class="stack-demo">
<div class="s-sans">Sans-Serif: Helvetica Neue → Helvetica → Arial → sans-serif</div>
<div class="s-serif">Serif: Georgia → Times New Roman → Times → serif</div>
<div class="s-mono">Monospace: Fira Code → Cascadia Code → Consolas → monospace</div>
</div>Der System-Font-Stack nutzt die native Schrift des Betriebssystems. Das spart HTTP-Requests und fühlt sich auf jedem Gerät vertraut an.
/* Kurz und modern: reicht für aktuelle Browser */
body {
font-family: system-ui, sans-serif;
}
/* Voller Stack mit Legacy-Fallbacks */
body {
font-family:
system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, "Helvetica Neue", Arial,
sans-serif;
}<div class="system-demo">
<div class="sys-short">system-ui, sans-serif (kurze Variante)</div>
<div class="sys-full">Voller System-Font-Stack mit allen Fallbacks</div>
</div>Für Code-Blöcke und <code>-Elemente eignet sich ein Monospace-Stack. Gleichbreite Zeichen machen Code lesbarer und Einrückungen konsistent.
code, pre, kbd, samp {
font-family:
ui-monospace, "Cascadia Code", "Fira Code",
"JetBrains Mono", Consolas, "Courier New",
monospace;
}<div class="code-demo">
<code>const greet = (name) => {
return `Hallo, ${name}!`;
};
console.log(greet("Welt"));</code>
</div>Für professionelle Typografie verwendest du oft verschiedene Schriftfamilien für Überschriften und Fließtext. Serifenschriften wirken in Headings elegant, während serifenlose Schriften im Body gut lesbar sind.
h1, h2, h3 {
font-family: Georgia, "Times New Roman", serif;
}
body {
font-family: system-ui, sans-serif;
}<div class="combine-demo">
<h3>Serif für Überschriften</h3>
<div class="subtitle">Untertitel ebenfalls in Serif</div>
<p>Der Fließtext verwendet eine serifenlose Schrift wie system-ui. Das erzeugt einen schönen Kontrast zu den Überschriften und macht längere Texte am Bildschirm angenehm lesbar.</p>
</div>Barrierefreiheit
Wähle gut lesbare Schriftarten, die auch bei kleineren Größen klar erkennbar sind. Dekorative Schriften oder sehr dünne Schnitte können die Lesbarkeit beeinträchtigen, besonders für Menschen mit Sehbeeinträchtigungen. Setze font-family auf body, damit das gesamte Dokument eine konsistente Schrift hat, die Screenreader-Nutzer nicht irritiert.
Verwende generische Familien als Fallback, damit der Text auch ohne Web-Font lesbar bleibt. Besonders auf langsamen Verbindungen oder wenn der Nutzer Web-Fonts blockiert hat, ist der Fallback entscheidend. System-Schriften wie system-ui sind immer verfügbar und daher die sicherste Wahl.
Dekorative Schriften (cursive, fantasy) eignen sich nur für kurze Überschriften oder dekorative Elemente, niemals für Fließtext. Nutzer mit Legasthenie oder kognitiven Einschränkungen profitieren von klaren, serifenlosen Schriften mit gleichmäßigem Zeichenabstand.
Häufige Fehler
6 Fehler01 Generische Familie als Fallback vergessen
font-family: "Open Sans" ohne Fallback. Wenn die Schrift nicht geladen wird, fällt der Browser auf seine Standardschrift zurück. Die kann eine Serifenschrift sein und das Design brechen. Immer mit sans-serif, serif oder monospace abschließen. 02 Anführungszeichen bei mehrwortigen Namen vergessen
font-family: Open Sans, sans-serif funktioniert nicht. Der Browser sucht nach einer Schrift namens “Open” und ignoriert “Sans”. Richtig: font-family: "Open Sans", sans-serif. 03 Generische Familie in Anführungszeichen
font-family: "sans-serif" wird als konkreter Schriftname interpretiert, nicht als generische Familie. Generische Familien stehen immer ohne Anführungszeichen. 04 Nur eine Schriftart ohne Fallback
font-family: Inter ohne Alternativen. Wenn Inter nicht verfügbar ist, gibt es keinen Plan B. 05 Komma zwischen Schriftnamen vergessen
font-family: Arial Helvetica sans-serif ist ungültig. Jeder Schriftname wird durch ein Komma getrennt. 06 Web-Font laden ohne lokalen Fallback
Browser-Kompatibilität
5 von 5font-family wird von allen Browsern vollständig unterstützt. Die generischen Familien (serif, sans-serif, monospace) sind seit den Anfängen von CSS verfügbar. system-ui wird seit 2017/2018 von allen modernen Browsern unterstützt.
-
Chrome
Komplett
-
Firefox
Komplett
-
Safari
Komplett
-
Edge
Komplett
-
Opera
Komplett
Email-Kompatibilität
2 von 5font-family funktioniert in HTML-Emails gut, aber Web-Fonts werden von den meisten Clients nicht unterstützt. Verwende System-Schriften als Basis.
-
Apple Mail
Komplett
Unterstützt auch @font-face für Web-Fonts
-
Gmail
Teilweise
Nur System-Schriften. Web-Fonts und @import werden ignoriert
-
Outlook
Teilweise
Nur System-Schriften. Fallback auf Times New Roman wenn Schrift nicht verfügbar
-
Thunderbird
Komplett
-
Yahoo Mail
Teilweise
Nur System-Schriften. Web-Fonts werden ignoriert
Newsletter
einmal die Woche, kostenlosNeue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.
Zuletzt verschickt · KW 40
Einmal alles neu, und die Lernplattform ist da