Fonts

Durch Fonts lässt sich die Schriftart auf einer Webseite verändern.

Eine Font-Family wird an die Kindelemente vererbt, kann aber bei bestimmten Elementen durch den Browser überschrieben werden. Damit die Schriftart auch bei diesen Elementen angezeigt wird, kann man die Regel font-family: inherit; setzen.


body {
  font-family: "Arial", "Helvetica", sans-serif;
}

Web Safe Fonts sind Schriftarten, die auf allen Systemen vorinstalliert sind. Dazu gehören Arial, Helvetica, Times New Roman und weitere.

Einbindung

Es gibt zwei verschiedene Möglichkeiten Fonts in die eigene Seite einzubinden.

@font-face

Die CSS-Regel @font-face erlaubt es, Schriftarten aus einer externen Datei einzubinden. Es ist auch möglich, mehrere Dateitypen für eine Schriftart anzugeben und so die Kompatibilität zu erhöhen.


@font-face {
  font-family: "CustomFont";
  src: url("/fonts/CustomFont.woff2") format("woff2"),
       url("/fonts/CustomFont.ttf") format("ttf");
}
 
body {
  font-family: "CustomFont", sans-serif;
}

Externe Fontlibrary

Es gibt Online-Bibliotheken für Schriftarten bei denen man sich die Schriftarten auswählen und einbinden kann. Die bekannteste Bibliothek ist Google Fonts.

Die Font wird über eine URL entweder in die eigene CSS Datei oder in die head Tags der HTML Datei eingebunden.


// In die CSS Datei
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
 
body {
  font-family: "Roboto", sans-serif;
}


<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">

Styles

Styles erlauben es die ausgewählte Schriftart zu verändern.

Dazu gehören das Gewicht, die Schriftgröße und die Schriftart.


body {
  font-weight: bold; // normal, bold, bolder, lighter, 100-900
  font-style: italic; // normal, italic, oblique
  font-size: 16px;
  font-family: "Arial", "Helvetica", sans-serif;
  text-decoration: underline; // none, underline, overline, line-through
}

Sizes

Diese Einheiten gelten für Schriftarten und generell für alle Elemente.

px: Pixel
em: 1em = 16px
rem: 1rem = 16px
%: Prozent
vh: Viewport Höhe
vw: Viewport Breite

Dateitypen

Es gibt mehrere Dateitypen für Schriftarten.

TTF

TrueType Fonts sind Schriftarten, die von Apple und Microsoft entwickelt wurden. Die Datein enthalten Vektorinformationen und “Hints”, die die Darstellung der Schrift auf Bildschirmen optimieren.

Dieser Dateityp wird oft in Desktop und Web-Anwendungen verwendet und ist überall kompatibel.

OTF

OpenType Fonts ist eine Weiterentwicklung von TrueType Fonts. Es bietet typografische Features wie Ligaturen, alternative Zeichenformen und Unicode-Unterstützung.

WOFF2

Web Open Font Format 2 ist ein Schriftarten-Format das für das Web entwickelt und optimiert wurde. Es nutzt eine stärkere Komprimierung als TTF/OTF und ist daher kleiner und schneller.

Google Fonts

Google Fonts ist eine Online-Bibliothek für Schriftarten, die von Google entwickelt wurde. Google erlaubt die Auswahl zwischen verschiedenen Styles und Weight für eine Schriftart.

https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap

family: Die Schriftart die man auswählt
wght: Das Gewicht der Schriftart
display: Die Darstellung der Schriftart

display=swap sorgt dafür, dass die Schriftart sofort nach dem Laden der Seite verwendet wird. Da erst eine Anfrage an Google gestellt wird, muss eine Fallback Schriftart geladen werden, da ansonsten die Seite nicht angezeigt wird. Wenn die Schriftart geladen ist, wird die Fallback Schriftart durch die Google Font ersetzt.

Rechtliches

Google stellt die Schriftarten unter einer freien Lizenz zur Verfügung. Damit dürfen die Schriftarten ohne Lizenzgebühr verwendet werden.

Dadurch, dass die Schriftarten auf den Servern von Google gehostet werden, besteht die Möglichkeit, dass Google Daten über die Nutzung der Schriftarten sammelt und verwendet, da jeder Aufruf der eigenen Seite eine Anfrage an den Google Font Server sendet. Google kann dadurch IP-Adressen und anderen Daten über einen Benutzer sammeln, obwohl dieser keine Google Seite besucht hat.