Schriftart in CSS mit font-family festlegen

Zu den am meisten verwendeten Inhalten auf Websites zählen Texte, die man neben unterschiedlichen Schriftgrößen auch mit unterschiedlichen Schriftarten versehen kann. Falls keine Schriftart festgelegt wird, gilt die Standardschriftart des Browsers.

Texte mit mehreren Schriftarten

Die Schriftart wird in CSS mit der Eigenschaft font-family zugewiesen. Hierbei ist es üblich, dass man nicht nur eine Schriftart angibt, sondern mehrere, die mit einem Komma getrennt werden. Der Grund hierfür ist, dass die angegebene Schriftart auf den Clientrechnern installiert sein muss und es kann durchaus vorkommen, dass das nicht der Fall ist. Wenn man mehrere Schriftarten angibt, dann gilt die 1. Angabe als Wunschschrift und die übrigen Angaben als Fallback.

Beim Beispiel auf der folgenden Abbildung würde das bedeuten, dass die Wunschschrift Arial ist. Wenn Arial nicht installiert ist, soll der Browser die Texte in Helvetica darstellen. Falls Helvetica auch nicht installiert ist, soll der Browser den Text in "irgendeiner serifenlose Schrift" darstellen, wofür die Angabe sans-serif gilt.

CSS-Code mit font-family

Werte für font-family

Im Grunde kann man jede Schriftart über den Familiennamen angeben, die es gibt. Falls eine Schriftart Leerzeichen im Namen enthält, muss man diese in Anführungszeichen setzen. Man kann alternativ auch einen generischen Familiennamen wie z.B. serif oder sans-serif angeben. Damit wird eine Schriftklasse gewählt, die mit mindestens einer Bedingung verknüpft ist. Die genaue Auswahl wird dann dem Browser überlassen, der eine Schriftart wählt und darauf achtet, dass die Bedingung erfüllt ist.

Typische und häufig verwendete Schriftarten

  • Arial
  • Helvetica
  • Verdana
  • Tahoma
  • Times New Roman (muss innerhalb " " gesetzt werden)
  • Courier New (muss innerhalb " " gesetzt werden)

Generische Familiennamen

  • sans-serif (ohne Serifen)
  • serif (mit Serifen)
  • cursive (kursive Schrift)
  • fantasy (ungewöhnliche Schrift, häufig mit bestimmten Effekten versehen)
  • monospace (unproportionale Schrift mit derselben Buchstabenbreite)
.selektor1 {
font-family: Arial;
}

.selektor2 {
font-family: Helvetica;
}

.selektor3 {
font-family: Verdana;
}

.selektor4 {
font-family: sans-serif;
}

.selektor5 {
font-family: serif;
}

p {
margin: 2px;
padding: 5px;
width: 400px;
height: 50px;
font-size: 24px;
line-height: 50px;
border: 1px solid #001055;
}
<p>Text in Normalschrift</p>
<p class="selektor1">Text mit Schriftart Arial;</p>
<p class="selektor2">Text mit Schriftart Helvetica</p>
<p class="selektor3">Text mit Schriftart Verdana</p>
<p class="selektor4">Text mit serifenloser Schrift</p>
<p class="selektor5">Text mit Serifenschrift</p>
Beispiel mit mehreren Schriftarten

Aus der Abbildung ist zu erkennen, dass sich die Texte bei Arial, Helvetica und sans-serif ziemlich ähnlich sind. Deshalb wird die Eigenschaft häufig in der Form font-family: Arial, Helvetica, sans-serif; angegeben, da man davon ausgehen kann, dass die Texte auf allen Rechnern zumindest ähnlich aussehen. Bei exotischen Schriftarten, bei denen man davon ausgehen kann, dass sie größtenteils nicht auf den Clientrechnern installiert sind, kann man die Schriften auch vom Server laden lassen.