Using Native Fonts

Using custom fonts on your company's site is a good idea when you want your brand to be defined. Like Google using Google Sans, Wallapop using Wallie, or Twitter using Chirp.

But for personal sites, unless you really love a font, or have a good reason to use them, it's not always the best idea. Not only uses more bandwidth, but also sometimes custom fonts look odd on specific devices. I always choose to use native fonts when possible.

For example, this site uses the default font for every device. On iOS, you'll see San Francisco, on Android, you'll see Roboto and if you're on Windows, you'll probably be seeing Segoe UI. The site looks good, has better performance, and looks consistent and native across other default UI.

To use the default fonts I use the following declaration on CSS:

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

You can also use native monospace fonts for code blocks, etc. In this site, you'll see headings on monospace font:

code, tt {
  font-size: 85%;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "Liberation Mono", monospace;
}

Fun fact: If you use bold font on iOS, you'll see my website on bold too, and that's something really cool, as the fonts are consistency across other apps from iOS, as if you were reading your notes app, or WhatsApp messages, etc. The only way to achieve that is by using native fonts.

My approach is to define the fonts as root classes, and later define with a variable. You can check the main.css↗ of this very same website.

You can read more information about why choosing native founts here: Why use this Font Stack?↗.