What the Font? Why Web-Safe Fonts Matter in 2021

Fonts are fun! They can also be exhausting. Just ask anyone who’s spent hours poring over thousands of font choices, trying to find the best matches for their website.

Although font selection can be very subjective, it is also possible to pick the wrong fonts for your website, from a technical perspective. Using a very specific font to match your company’s logo may look great when your website design is complete, but it can be a disaster for functionality and load speed.

Even in 2021, with growing adoption of 5G and other high-speed internet connections, using fonts that are not “web-safe” can be a huge drag on your site, and drive away visitors.

What Are Fonts, Anyway?

The word “font” in this context refers to the design and appearance of text characters on a website. Examples of common fonts include Arial, Times New Roman, and Courier.

Historically, what we now call a “font” was known as a “typeface”. When metal typesetting was still in wide use, “font” referred to the size and weight (thickness) of a typeface.

Fonts generally fall into one of four major categories:

Serif Fonts

A serif font is a “traditional” typeface, resembling the type used in most 20th Century English-language books and newspapers. Specifically, a “serif” is a small, decorative stroke appearing at the end of the major lines in letters and numbers.

Times New Roman, shown here, is the best-known example of a serif font.

Sans-Serif Fonts

As the name implies, a Sans-Serif Font is a typeface without serifs. (“Sans” is a French word meaning “without.” Finally, that eight years of French study is paying off for me!)

The example above is Arial, one of the “default” sans-serif fonts used in Windows. It was inspired by the popular Helvetica font, which you may recognize from the famous New York subway signage.

Open Sans, the font used for the text you’re reading right now, is another widespread sans-serif font.

Monospaced Fonts

Also called “fixed-width” fonts, monospaced typefaces are those for which each letter, number, or character is exactly the same size, in terms of the space it occupies.

Many monospaced fonts, like Courier, resemble the letters and numbers produced by mechanical typewriters. Notice in this example that the typeface size is a bit smaller than the Times New Roman and Arial examples, even though all images are identical in width and height.

While monospaced fonts have many useful applications, particularly in computer coding, they are not a good idea for website text. This is because they are more difficult to read than serif and sans fonts. They also tend to take up a lot of space, with an “i” being sized the same as an “@”, for example.

Handwriting and Stylish Fonts

We’ll lump everything else into this broad category: fonts designed to mimic handwriting, stencils, paint brush strokes, ransom letters, and other quirky typefaces.

Let’s get this out of the way, in case it isn’t obvious: you should never use these types of fonts in the text of your website. They are almost always difficult to read, will slow down your page load speeds, and are frequently not compatible with many browsers. Using “quirky” fonts in your website text makes a bad experience for visitors. Don’t do it!

If you must use a particular stylish font – for example, to match your logo – do it in an image / graphic, and only as a headline or small bit of text. Keep in mind that this text won’t be visible to search engines, and will add to the load time for your page or post.

What are Web-Safe Fonts?

With all that out of the way, we can turn our attention to “web-safe” fonts.

Simply put, a web-safe font is a font that will render instantly in all browsers and on all platforms.

When designing your website, you want to make sure to provide the same safe, user-friendly experience to all visitors. This is a challenge, because you face two big hurdles: differing platforms and browsers for each user.

As you know, the major platforms are:

• Windows desktop / laptop
• Mac desktop / laptop
• Android phone / tablet
• iPhone / iPad (iOS)

And the most-used browsers:

• Chrome
• Firefox
• Edge
• Safari

Because the browser experience differs from one platform to the next, web designers should treat each combination of platform + browser as its own unique category, in terms of user experience. That leaves us with 16 different ways of accessing your website for the vast majority of users. (Examples: Chrome on Windows; Safari on iOS; etc.)

But not all browsers are created equal! Among these, Apple’s Safari is notorious for doing its own thing and not always adhering to standards created by industry-leading Google’s Chrome. For example, Safari did not support WebP images until September 2020, a decade after the format started showing up online.

By exclusively using web-safe fonts on your website, you can ensure every user sees the same thing, regardless of platform and browser.

A List of Web-Safe Fonts

So, what fonts are web-safe? There is no single, definitive “list.” Web searches will give you a lot of results.

We found these fonts consistently on most lists:

• Arial
• Garamond
• Georgia
• Impact
• Palatino
• Tahoma
• Times New Roman
• Trebuchet
• Verdana

That’s a pretty short list! But it’s hardly exhaustive. Your best bet is to choose a font you like and search “is font X web-safe.” Carefully review results, then test it yourself. Visit the website on different platforms – your PC, your phone, a friend’s phone or laptop, and so on. The text should be identical on all screens.

You can also run the site through a diagnostic tool like PageSpeed Insights. If you see poor results or errors resulting from font loading issues, it may be time to pick a different font.

Forcing Fonts Into Browsers (Not Advised!)

It is possible to use non-web-safe fonts on your website. This can be done by coding the site so it will instruct browsers to load the desired font from your site’s server or another server, such as Google Fonts.

You don’t even need to hire a developer to do this. Here’s a tutorial for using Google Fonts on your website.

If you do have a developer or you’re a developer yourself, you can use some coding tricks to display non-web-safe fonts without slowing down your site too much. Here’s a great starting point.

If your site is on WordPress, there are many themes and plugins that will give you the option to use a variety of fonts. Go to Plugins > Add New and search “font” to see some selections.

But to paraphrase Ian Malcolm, just because you can doesn’t mean you should. I’ll say it again: using fonts that are not web-safe can result in a bad experience for your website visitors. So play it safe!

The Bottom Line

Good typography is an important element of website design, but speed and functionality are arguably much more crucial. By using web-safe fonts, you’re putting your users first, and ensuring an accessible and equal experience for everyone.

Further Reading

• 30+ Web Safe Fonts – Kinsta
• Great Fonts for Websites – Zyro
• HTML & CSS-Friendly Web-Safe Fonts – Make a Website Hub
• Web-Safe HTML and CSS Fonts – HubSpot
• CSS Web-Safe Fonts – W3 Schools