Load the default OS font with CSS

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.

What font do browsers render if you don't specify a font family?

Someone reached out and asked if browsers would render system-ui when a site's stylesheet doesn't include a font-family declaration. This approach might seems obvious, but if you set up an empty HTML file, browsers don't load system-ui.

When I tested it out on my machine, all three engines (Chromium, Firefox and Webkit) rendered the Times font when a site that doesn't define any styles. Times seems oddly specific, though, or?

Surprisingly, if you check the browsers' user agent stylesheets (Chromium, Firefox, Webkit), they include very few font-family declarations and none defines font-family on :root, html or body. Where's the rendered Times font coming from?

I can't say where it's defined in code (some browser internals maybe?), but the Times font was set in my browser settings.

Safari seems to render a user-defined font, too, but I couldn't the setting. If you know, please reach out.

I love some good old browser customization, but I'm unsure it matters these days because websites eithr include a normalize.css / reset.css or define their own font setup. But it's good to know that you can change the default size.

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.

But speaking about Windows, of course things can never be easy. Unfortunately, using system-ui (and probably using default operating system fonts in general) has issues in some OS / language combinations. When using Windows, Chromium, and an Asian language the system font isn't always suitable for Latin glyphs.

Things are complicated and there's a long-lasting CSS working group discussion trying to resolve the issue. Either way, a quick font rendering check on different operating systems and languages won't harm!

Theoretically, there are also more granular CSS font-family values to match OS styling:

• 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 are support only by Safari since 2020.

MDN Compat Data (source)

Browser support info for ui-serif

Nope	Nei	Nein	Nope	Nope	13.1	13.1	Nei	Nei

If the system font topic is interesting to you, Jim did a lovely deep-dive into the topic (thanks, Sarah, for pointing me towards this article). Check it out, it's great!

And also, if you're into system fonts, multiple folks pointed me to Modern Font Stacks which is worth a look for sure, too!