Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >font

font

font: [<font-style>] [<font-variant>] [<font-weight>] [<font-stretch>] <font-size>[/<line-height>] <font-family>

Eine Kurzschreibweise, die font-style, font-variant, font-weight, font-stretch, font-size, line-height und font-family in einer Deklaration setzt. Pflicht sind nur Größe und Familie, in dieser Reihenfolge am Ende.

Werte

  • optional am Anfang (in beliebiger Reihenfolge): Kursiv (italic), Kapitälchen (small-caps), Stärke (bold, 600), Breite (condensed).
  • Größe (Pflicht), optional gefolgt von einem Schrägstrich und der Zeilenhöhe: 16px/1.5.
  • Familie (Pflicht, zuletzt): Georgia, serif.
  • Systemschriften – die Schlüsselwörter caption, menu, message-box…: die Schrift der entsprechenden Teile des Betriebssystems.

Initialwert: nach den einzelnen Eigenschaften. Vererbt: ja. Gilt für: alle Elemente.

Beispiele

Die ganze Schrifteinstellung in einer Zeile:

<p class="quote">Ein Zitat kursiv, halbfett, 18 px mit einer Zeilenhöhe von 1,6 in Georgia.</p>

.quote {
  max-width: 300px;
  margin: 0;
  font: italic 600 18px/1.6 Georgia, serif;
}
Ergebnis

Ein Zitat kursiv, halbfett, 18 px mit einer Zeilenhöhe von 1,6 in Georgia.

Worauf Sie achten sollten

  • Die Kurzschreibweise setzt alles, was nicht angegeben ist, auf die Anfangswerte zurück – auch line-height auf normal. Steht sie nach line-height, überschreibt sie die Zeilenhöhe.
  • Ohne Größe oder Familie ist die ganze Deklaration ungültig und der Browser ignoriert sie: font: bold Arial funktioniert nicht.
  • Browser geben Formularelementen (input, button, textarea) eine eigene Schrift; sie erben sie nicht. font: inherit vereinheitlicht das.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 1. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
font-family
font-size
line-height
font-weight
font-style