After you’ve spent all that time picking out the perfect brand fonts for your business, you might be disappointed to learn that not all font are considered web-safe, AKA, can be used and displayed consistently online. What does that mean?

Web safe fonts are a limited set of fonts that can be used universally across the web and every browser and computer will render them exactly the same.

This specific list of fonts have been adapted and accepted by internet browsers no matter if a user has installed them on their computer. Unfortunately, that means the majority of fonts, if not all of them, that you purchase or download from the internet and install on your computer are likely not considered web-safe fonts.

Here are a list of the most widely accepted web safe fonts:

This approved list of web safe fonts from W3C Schools is pretty small, but there are several more fonts that are also considered generally web-safe, depending on your user’s operating system. Some of those additional fonts include Franklin Gothic, Gills Sans, Helvetica, Lucida Sans, Optima, Palatino, Rockwell and Lucida Handwriting.

Should I use a non web safe font? 

When you use non web-safe fonts on your website or in your emails, there are some additional considerations you should make. For one, you should be prepared that some users will not see the same thing that you see on your end.

Font compatibility is dependent on several things, all of which you don’t really have any control over:

• location
• internet bandwidth
• browser settings
• device / operating system

Many website platforms and email builders host a library of non-web safe fonts that you can access and use in your designs. Font libraries such as Google Fonts and Adobe Fonts allow you to use non web safe fonts on your website easily. Despite the popularity of these services and generally wide usability and compatibility with most internet users, web safe fonts are technically the only fonts guaranteed to show up without variability. Additionally, fonts loaded from cloud services like these can often affect your page loading speed so it’s good to consider alternatives if a fast-loading website is critical for your business.

Fallback Fonts and Font Stacks

When you use a non web safe font as the primary font for your website or emails, you should set a fallback font, if you are able to, or at least assign a fallback font category.

A fallback font is a font that you designate that most closely mimics the style of your original font choice.

This is done through CSS coding, typically by a developer. Sometimes it benefits you to designate multiple fallback font options, also called a font stack. The fonts are then ordered in terms of preference from most preferred, appearing first, to least preferred, appearing last. Especially, when you are hosting your own custom fonts, you should define a font stack.

For example, if you’ve chosen a Google font such as Poppins for your website headings, you might set Century Gothic as a fallback font because it looks very similar. Most Microsoft users have this font installed by default onto their computer so it will display for them, if, in the unlikely event, that your Google font fails to load. If your Google font fails to load AND a user doesn’t have Century Gothic installed on their computer, you can define Arial as your last preferred fallback font option.

The CSS for above font stack on your H1 level heading would look something like this:

h1{
font-family: Poppins, Century Gothic, Arial, san-serif;
}

If you are using WordPress, you can define your CSS in the Appearance menu under Customize. To target paragraphs, instead of your H1 heading, you’ll use the selector ‘p’ instead or you can use ‘body’.

You can check this handy site or google ‘popular font stacks’ to find popular non web safe font options you might want to include as a part of your font stack. If you don’t feel like doing research to find the next closest font to your original font choice, you can always simply define a fallback font category or generic font family. That is, instead of a specific font name, you can use one of the following font-style categories:

• serif
• san-serif
• cursive
• fantasy
• monospace

As mentioned, assigning a fallback font is usually something that’s done by a developer, but some website platforms and email builders will choose a default fallback font on your behalf, or the browser will define a default font if none is specified.

If your website user experience and formatting are really important to you, web safe fonts are something you shouldn’t ignore. However, don’t let the term “web-safe” throw you too much. Even if you use a non web-safe font, it won’t actually hurt your website – it just might not display the way you had hoped.

Need help figuring out the right fonts for your website? Reach out today.

Kristin Pruis

I help female entrepreneurs and business owners create brands that command the spotlight. I love working with women to help them create beautiful, one-of-a-kind brands that give them the confidence to take their business to the next level and get them seriously noticed. I’ve worked with coaches, authors, influencers… you name it, and I bet I can help you too.