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;
}