CSS: The Use of System Fonts

To use web fonts is nice, but sometimes you just want to use the default font or one which already is installed on the system. This way, you can boost the performance a little bit, because the browser doesn’t have to download a font file first. But also you can present your user a more comfortable look when the font on the page matches with the one from the OS.

Sources: For Sans Serif and Monospace I took the properties used in Bootstrap. And also many other sites use these. For Serif I composed them by myself. Do not hesitate to tell me if you have a better idea for one of those choices. 😉


Sans Serif

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

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

Serif

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