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, and consistent across the whole 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, Consolas, "Liberation Mono", Menlo, Courier, 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.