Übersicht

Die font-family CSS Eigenschaft erlaubt es, eine priorisierte Liste von Schriftfamiliennamen und/oder generische Familiennamen für ein ausgewähltes Element anzugeben. Im Gegensatz zu den meisten anderen CSS Eigenschaften werden die Werte durch Komma getrennt, um zu kennzeichnen, dass sie Alternativen darstellen. Der Browser wählt die erste Schrift, die auf dem Computer installiert ist oder mittels der Informationen, die über eine @font-face At-Regel gegeben sind, heruntergeladen werden kann.

Webautoren sollten einer Schriftfamilienliste immer mindestens eine generische Familie hinzufügen, da es keine Garantie dafür gibt, dass eine bestimmte Schriftart auf dem Computer installiert ist oder über die @font-face At-Regel heruntergeladen werden kann. Die generische Schriftart erlaubt es dem Browser, falls nötig, eine akzeptable Ersatzschriftart auszuwählen.

Es ist oft vorteilhaft, die Kurzform Eigenschaft font zu verwenden, um font-size und andere Schrift bezogene Eigenschaften auf einmal zu setzen.

Hinweis: Die font-family Eigenschaft definiert eine Liste von Schriftarten, von der höchsten zur niedrigsten Priorität. Die Auswahl der Schriftart stoppt nicht einfach bei der ersten Schriftart in der Liste, die auf dem System des Benutzers installiert ist. Vielmehr findet die Auswahl der Schriftart pro Zeichen statt, so dass, falls eine verfügbare Schriftart ein bestimmtes Schriftzeichen nicht definiert, in den übrigen Schriftarten nach diesem Zeichen gesucht wird. Dies funktioniert jedoch nicht im Internet Explorer 6 oder früheren Versionen.

Falls eine Schrift nur in bestimmten Stilen, Varianten oder Größen verfügbar ist, können diese Eigenschaften auch beeinflussen, welche Schriftart ausgewählt wird.

Initialwerthängt vom User Agent ab
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Medienvisuell
Berechneter Wertwie angegeben
Animationstypdiskret
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

Formale Syntax: [ <family-name> | <generic-family> ]#

wobei
<family-name> = <string> | <custom-ident>+
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

font-family: Gill Sans Extrabold, sans-serif
font-family: "Goudy Bookletter 1911", sans-serif

font-family: serif
font-family: sans-serif
font-family: monospace
font-family: cursive
font-family: fantasy

font-family: inherit

Werte

<family-name> Der Name der Schriftfamilie. Zum Beispiel "Times" und "Helvetica" sind Schriftfamilien. Schriftfamiliennamen, die Leerzeichen enthalten, sollten von Anführungszeichen eingeschlossen werden.
<generic-name>

Generische Schriftfamilien dienen als Fallback-Mechanismus, ein Mittel, um etwas von der Absicht des Stylesheet Autors zu erhalten für den Fall, wenn keine der angegebenen Schriftarten verfügbar sind. Generische Familiennamen sind Schlüsselwörter und dürfen nicht in Anführungszeichen eingeschlossen werden. Eine generische Schriftfamilie sollte die letzte Alternative in einer Liste von Schriftfamiliennamen sein.

serif
Schriftzeichen haben abschließende Striche, ausgeweitete oder zugespitzte Enden oder serifenbetonte Enden.
Z. B.  Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif
sans-serif
Schriftzeichen haben gerade Strichenden.
Z. B. 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif
monospace
Alle Schriftzeichen haben die gleiche Breite.
Z. B. "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace
cursive
Schriftzeichen in kursiven Schriftarten haben üblicherweise verbindende Striche oder andere kursive Charakteristiken, die über die von kursiven Schriftzügen hinausgehen. Die Schriftzeichen sind teilweise oder ganz verbunden und das Ergebnis ähnelt eher einer Handschrift als gedruckten Lettern.
fantasy
Fantasie Schriftarten sind überwiegend dekorative Schriftarten, die verspielte Darstellungen von Schriftzeichen beinhalten.

Gültige Schriftfamiliennamen

Schriftfamiliennamen müssen entweder in Anführungszeichen eingeschlossene Strings sein oder nicht angeführte als eine Aneinanderreihung von einem oder mehreren Bezeichnern. Das heißt dass in nicht angeführten Schriftfamiliennamen Interpunktionszeichen und Ziffern am Anfang jedes Zeichens Maskiert (escaped) werden müssen.

Beispielsweise sind die folgenden Angaben gültig:

font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

Die folgenden Angaben sind ungültig:

font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;

Beispiele

Beispiel 1

body     { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }

.receipt { font-family: Courier, "Lucida Console", monospace }

Beispiel 2

.exampleserif {
    font-family: Times, "Times New Roman", Georgia, serif;
}

.examplesansserif {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.examplemonospace {
    font-family: "Lucida Console", Courier, monospace;
}

.examplecursive {
    font-family: cursive;
}

.examplefantasy {
    font-family: fantasy;
}
<div class="exampleserif">
Dies ist ein Beispiel für eine Serifenschrift.
</div>

<div class="examplesansserif">
Dies ist ein Beispiel für eine serifenlose Schrift.
</div>

<div class="examplemonospace">
Dies ist ein Beispiel für eine nicht-proportionale Schrift.
</div>

<div class="examplecursive">
Dies ist ein Beispiel für eine kursive Schrift.
</div>

<div class="examplefantasy">
Dies ist ein Beispiel für eine Fantasieschrift.
</div>

Live Beispiel

Spezifikation

Spezifikation Status Kommentar
CSS Fonts Module Level 3
Die Definition von 'font-family' in dieser Spezifikation.
Anwärter Empfehlung Keine wesentlichen Änderungen
CSS Level 2 (Revision 1)
Die Definition von 'font-family' in dieser Spezifikation.
Empfehlung Keine wesentlichen Änderungen
CSS Level 1
Die Definition von 'font-familiy' in dieser Spezifikation.
Empfehlung  

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
font-familyChrome Vollständige Unterstützung 1Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 1IE Vollständige Unterstützung 3Opera Vollständige Unterstützung 3.5Safari Vollständige Unterstützung 1WebView Android Vollständige Unterstützung 1Chrome Android Vollständige Unterstützung 18Edge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung 10.1Safari iOS Vollständige Unterstützung 1Samsung Internet Android Vollständige Unterstützung Ja
system-ui
Experimentell
Chrome Vollständige Unterstützung 56Edge Keine Unterstützung NeinFirefox Keine Unterstützung Nein
Keine Unterstützung Nein
Vollständige Unterstützung 43
Hinweise Alternativer Name
Hinweise Supported on macOS only.
Alternativer Name Verwendet den nicht standardisierten Namen: -apple-system
IE Keine Unterstützung NeinOpera Vollständige Unterstützung 43Safari Vollständige Unterstützung 9
Hinweise Alternativer Name
Vollständige Unterstützung 9
Hinweise Alternativer Name
Hinweise Supported since macOS 10.11.
Alternativer Name Verwendet den nicht standardisierten Namen: -apple-system
WebView Android Vollständige Unterstützung 56Chrome Android Vollständige Unterstützung 56Edge Mobile Keine Unterstützung NeinFirefox Android Keine Unterstützung NeinOpera Android Vollständige Unterstützung 43Safari iOS Vollständige Unterstützung Ja
Hinweise Alternativer Name
Vollständige Unterstützung Ja
Hinweise Alternativer Name
Hinweise Supported since iOS 9.
Alternativer Name Verwendet den nicht standardisierten Namen: -apple-system
Samsung Internet Android Vollständige Unterstützung 6.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Verwendet einen nicht standardisierten Namen.
Verwendet einen nicht standardisierten Namen.

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mdnwebdocs-bot, SJW, fscholz, dio, Sebastianz, timbernasley
Zuletzt aktualisiert von: mdnwebdocs-bot,