Are Web-Safe Fonts still relevant in 2024?

No one is web-safe anymore! 😱 At least no font is in 2024. Find out why and if it is still relevant to use system fonts in this short video and post.

Tim asks:

“Do web-safe fonts make a page load more quickly? Does it really make a difference?”

Tim is referring to an article by wix.com, where they claim web-safe fonts are a good choice because of:

  • Consistency – which is not true
  • Accessibility – which depends on the system font
  • Performance – which can be true

Web-safe fonts are not web-safe anymore

Web-safe fonts system fonts that are pre-installed on most browsers and operating systems. While this was true 15 years ago, when you would find Arial, Times New Roman, Georgia or Verdana on Windows and Apple machines, this drastically changed with the mobile era.

Arial, Verdana, Times New Roman and Georgia are both pre-installed on Windows, MacOS and iOS. On Android however they get replaced by Roboto or Noto Serif
None of the classic web-safe fonts are pre-installed on Android devices

While iOS kept the most common ones, Android ditched all of them, using their own fonts. You can find on good old fontfamiliy.io, what will be the replacement for these defaults. And since Android globally is the most popular operating system with 43% (source), this matter a lot.

For Android, there are no documented font names. It falls back to the default sans-serif (Roboto) or serif (Noto Serif). Here you can find a list of the system fonts on Apple and Windows.

System fonts make your website inconsistent

Depending on the platform your website is viewed on, it will create inconsistencies in your type choice. Especially with headings, which will convey most of the personality of your design, this can be problematic, resulting in a very different mood. In this critical area, I would not don’t bet on system fonts.

On MacOS or iOS, the headline is set in Rockwell, on Windows it will be quite similar Rockwell Nova. The sans-serif body text is in Arial. Not great, but okay.
On Windows and Apple devices, Rockwell is a very striking heading.
On Android, the headline is set in Roboto, this is quite different. The sans-serif default body text is Roboto too, which is not so different compared to Arial.
On Android, the body text feels quite similiar, but the heading not.

It can be less relevant if you are using the default sans-serif or serif typeface for body text or UI text. Of course, there are differences, but they are less obvious in that role. Tools like Modern Font Stacks might be helpful here.

Do system fonts make your website faster now?

That depends on the amount of fonts you are using on a page. If it’s, let’s say, twenty different typefaces and styles, it will have an effect. Because the browser has to download them before rendering the page, and that can take time, depending on your connection. But a font file is only downloaded when it is actually used on that page. And if you really have twenty different fonts on one page, your design might have other problems than the font files along 😉.

Let’s be more realistic and consider 2 to 5 different font files. If they are served in the compressed woff2 format or a variable font even, it could be as small as to 30 to 80 KB. This is still less than most images on a website will have, let alone video files. So don’t think too much about it and express yourself with web fonts.

By the way, I do not want to say that file size does not matter at all. You should not try to keep your font files as small as possible, and next to compressing them, also subsetting fonts (excluding characters and scripts you don’t need) is a great approach.

In summary, I recommend:

  • Prefer web fonts, especially in headings, because of consistency.
  • Keep it to 2 to 5 font files or below 100 KB.
  • Use system fonts for body text or UI text, if you have to.

What do you think? Performance over style? Or both? Tell me in the comments! Also if you have a question for me.

11 Comments

  1. This is my dilemma when I do rebranding. But style can’t suffer and the true expression of a brand’s soul.

    I’ve recently introduced two new fonts to a brand I’m working at. I’m waiting for the devs to implement/redesign the entire website – soon.

    Lovely blog post, Oliver! Thank you for staying on top of every font insight!

    P.S. Check this out-of-ordinary type https://www.laborandwait.xyz/fonts/esperanza

    1. What a fantastic typeface, Jana! Upright Italics! Sophisticated Stencil style! I just asked them about being featured on Font Friday 😉.

  2. What are your thoughts on font swap Oliver? I use web fonts, but if I enable swap in the font display settings with a so called web safe font I see a flash as the page opens with the web safe font before the correct font appears.

    I see many pushing to use font swap, however the advantage does not seem clear. After all, if the web font is loaded on the server it should load like everything else.

    1. I think font-swap is a good thing, because any content is better than no content, even if it might result in a slight reflow. But if you connection is fast, then it most likely will work. If not, you will have text, which is great 😉.

  3. Hi Oliver,
    Thanks so much for giving such a detailed answer! Essentially, it’s one less thing for an amateur webmaster like me to to worry about.

    Very best wishes and thanks again for Pimp My Type
    Tim

  4. I thought those ancient Arial, New Times Roman fonts will be available every where. I think originally they were introduced due to Print media.

  5. Thank you for extra tasks. I was living under the believe that “web fonts” are safe on all devices with access to the web.

Leave a Reply

Your email address will not be published. Required fields are marked *