Load the default OS font with CSS (#blogPost)

I'm no font person. Sometimes, I notice a nice font setup, but I don't have the eye for it, and I appreciate the performance boost of not loading custom fonts.

That's why this blog (at the time of writing) aims to render the default operating system fonts. After reading Stoyan's post on system fonts I could just do a little spring clean up.

Here's the default CSS font setup I shipped for ages:

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

It's one of these snippets you carry over from project to project. This font-family declaration tries to find installed fonts from left to right. It starts with -apple-system and BlinkMacSystemFont. And guess what? These two font-family values are relics from the past that you don't need in 2025.

Today, there's a CSS value to load the default operating system font, which is supported everywhere — system-ui.

MDN Compat Data (source)

Browser support info for system-ui

56	56	79	92	92	11	11	6.0	56

As MDN states:

Cool! By using system-ui as default font, I could clean up a bit of CSS and go with this beauty.

body {
  font-family: system-ui, sans-serif;
}

Nice and clean. This site will now render .SF NS on MacOS, and I don't have a Windows machine, but it seems to be Segoe UI. But whatever is available on the OS does the trick for me.

Theoretically, there are also values for more granular system fonts:

• ui-serif for the default user interface serif font.
• ui-sans-serif for the default user interface sans-serif font.
• ui-monospace for the default user interface monospace font.
• ui-rounded for the default user interface font that has rounded features.

These don't seem to be supported anywhere yet, but you can bet I'll adopt these as a browser ships them!