Web Fonts zu nutzen ist nett, aber manchmal ist es sinnvoll, eine Schriftart zu nutzen, die bereits auf dem System installiert ist. So kannst du die Perfomance etwas verbessern, weil der Browser so nicht mehr die Font-Datei laden muss. Außerdem kannst du dem Nutzer so einen gewohnten Look präsentieren, wenn die Schriftart auf der Webseite zu dem seinen Betriebssystems passt.

There’s also an english version of this article on my Medium site. Beitragsbild: mali maeder, Quelle: Pexels

Quellen: Für Sans Serif und Monospace habe ich die Properties genommen, die auch in Bootstrap gesetzt sind. Die Werte für Serif habe ich selbst zusammengestellt. Wenn du eine bessere Idee für eins der Werte hast, gib mir gerne bescheid. 😉

Sans Serif

Beispiel: Hello World

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

Monospace

Beispiel: Hello World

code {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Serif

Beispiel: Hello World

h1 {
    font-family: Baskerville, Cambria, "Roboto Slab", Georgia, "Linux Libertine", serif;
}