font-family

Zuletzt aktualisiert am 15. Februar 2026

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.

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

Beispiele

Grundlegender Font-Stack

Ein 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>

System-Font-Stack

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>

Monospace für Code

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>

Verschiedene Schriftarten kombinieren

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

• 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.
• 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.
• 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.
• Nur eine Schriftart ohne Fallback: font-family: Inter ohne Alternativen. Wenn Inter nicht verfügbar ist, gibt es keinen Plan B.
• Komma zwischen Schriftnamen vergessen: font-family: Arial Helvetica sans-serif ist ungültig. Jeder Schriftname wird durch ein Komma getrennt.
• Web-Font laden ohne lokalen Fallback: Eine Google Font als einzige Schrift verwenden, ohne ähnliche System-Schrift als Alternative. Bei Netzwerkproblemen wird der Text in der Browser-Standardschrift angezeigt.

Browser-Kompatibilität

font-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.

Email-Kompatibilität

font-family funktioniert in HTML-Emails gut, aber Web-Fonts werden von den meisten Clients nicht unterstützt. Verwende System-Schriften als Basis.

Verwandte Eigenschaften