CSS Grundlagen: Fonts verstehen lernen – Ein Einsteiger-Leitfaden für die Welt der Schriftarten

Schriftarten definieren: CSS Eigenschaft Font-Family

Das zentrale Design-Element einer Webseite ist die Schriftart, die verwendet wird. Mit der CSS-Eigenschaft font-family kann die bevorzugte Schriftart oder eine Liste alternativer Schriftarten für die Webseite festgelegt werden.

Die Angabe in oranger Schrift ist die Standardanwendung der CSS-Eigenschaft font-family.

1. Es können mehrere Schriftarten angegeben werden, jeweils durch Komma getrennt. Für die Darstellung der Webseite wird die erste Schriftart aus der Liste verwendet, die auf dem System des Benutzers installiert ist.

2. Schriftarten mit Leerzeichen im Namen der Schriftart müssen in einfache oder doppelte Anführungszeichen (Englisch: Quotes) gesetzt werden.

3. Die Angabe der Schriftart ist nicht case-sensitiv, d.h. Kleinschreibung oder Großschreibung spielt keine Rolle.

4. Ohne ladbare Web-Fonts können nur die Schriften vom Browser angezeigt werden, die auf dem System des Nutzers installiert sind.

   Zusätzlich zu konkreten Schriftarten sollten deshalb immer generische Schriftarten festgelegt werden. Die wichtigsten Keywords für generische Schriftarten sind:

   • serif für eine Schrift mit Serifen, z.B. Times New Roman.

   • sans-serif für eine Schrift ohne Serifen, z.B. Arial oder Verdana.

   • monospace für eine Schrift mit gleicher Buchstabenbreite für alle Buchstaben.

5. initial erzwingt die Wiederherstellung der ursprünglichen Schriftart, d.h. der Wert initial stellt für die Eigenschaft font-family die Standardschrift ein.

6. inherit erzwingt die Vererbung der Schriftart vom Eltern-Element.

body {
  font-family: "Open Sans", "Liberation Sans", Verdana, Arial, Helvetica, sans-serif;
}