Imagine creating a gorgeous website — paying special attention to details like spacing, alignment, and overall aesthetic — and then finding out your text appears differently on certain devices. Suddenly, your perfectly crafted design is marred by awkward text breaks or, even worse, unreadable characters. 

That’s why you need to use web safe fonts. 

What are web safe fonts?

Web safe fonts are typefaces that come pre-installed as default fonts on the majority of computers and devices, regardless of operating system. Creating a web safe font stack gives you the best chance of having your text appear as intended. 

Best web safe fonts to use in your designs

Whether you’re a fan of serif or sans serif fonts, there are several typefaces and font styles that can improve the readability of header and body text on your website. Consider some of these typefaces for your webpages.

Accessible web safe fonts

Web safe fonts aren’t necessarily accessible. Remember — web safe only refers to whether or not the font is installed by default on most devices. For a font to be accessible, it must also be legible to people with vision impairments and reading disabilities. 

Generally speaking, the best web safe fonts that are also accessible are:

• Arial (sans serif)
• Arial Black (sans serif)
• Tahoma (sans serif)
• Times New Roman (serif)
• Verdana (sans serif)
  

But keep in mind that when used in web design, factors such as decorative elements, font size and weight, and color contrast can affect the accessibility of different fonts. 

Many decorative font styles like gothic or script as well as serif fonts make it difficult to distinguish between letters, particularly when the fonts mimic handwriting or cursive. Unnecessary embellishments and crowded letters can be challenging for many readers and slow them down. 

Size, weight, and color contrast have a major impact as well. For instance, thin fonts are very difficult to read on screens, especially in paragraphs. And even popular fonts like Monaco or Verdana can be difficult to read if there is a low color contrast between the font and background colors. 

For more tips on accessible web typography, check out the Webflow University typography lesson. 

Additional web-safe fonts

While these fonts don’t get the gold star for accessibility, they do come standard on both Windows and Apple operating systems. These web safe fonts can work well when used in a font pairing — with a more accessible font for large blocks of text and standard web safe fonts for elements like headers and titles. 

Popular web-safe fonts:

• Courier New (monospace)
• Georgia (serif)
• Impact (sans serif)
• Trebuchet MS (sans serif)

You might have noticed that popular fonts Helvetica and Calibri are missing from this list. These are designer favorites — Helvetica even has its own documentary — but are not standard across operating systems. Windows no longer supports Helvetica and generally replaces it with Arial, which can cause spacing issues. Calibri is a Microsoft font, so it does not come standard on iOS. 

We haven’t mentioned every web safe font here, but be wary of claims of 30+ web safe fonts. Sometimes Microsoft fonts like Calibri, Cambria, and Garamond are labeled web safe because Microsoft Windows is so widely used. However, we can’t assume that Microsoft-created fonts will appear correctly on all browsers and devices. While both PCs and Macs may include fonts like Comic Sans by default, iOS and Android operating systems may not, meaning those fonts might not work on mobile devices. 

Web fonts versus web safe fonts

Confusingly, web fonts are not technically web safe fonts because they do not come installed on most devices by default. But as you’ve probably noticed, web safe fonts are very limited. That’s where web fonts come in.

Web fonts offer a great alternative to web safe fonts because they are hosted on the web and then downloaded by the browser while rendering the web page. To use web fonts, you’ll need to upload the fonts to your website and either self-host (on your own server) or use a third-party font delivery service like Google Fonts or Adobe Fonts. 

To self-host, you’ll need to install the font and then write @font-face code that references the font file in your own CSS. Font delivery services generate this code for you, so you’ll just need to copy a couple lines of code into your HTML. 

In Webflow, you can use either the Google Fonts or Adobe Fonts integrations to easily use web fonts. 

How and where to use fonts that are not web safe 

Typography is an art in itself, so it can be frustrating to feel limited by your font choices, especially if you like to design your own typefaces. But just because a font isn’t web safe or available as a web font doesn’t mean it has no place on the web — you just have to consider where and how you use it. 

Images and animations

When a font is part of an image or animation, you don’t have to worry about whether or not website visitors have the font installed on their computers. Hero images and text animations are a great place to show off your custom typography skills. 

But don’t get carried away with this workaround. Using images to convey information can cause serious accessibility issues because screen readers cannot parse text from image files. Screen readers refer to the alt text attached to images, which is why it’s so important to include detailed alt text with every image that conveys information. 

With fallback fonts

Fallback fonts allow you to use custom fonts on your website while still ensuring that the majority of visitors can read the text. Webflow designates fallback fonts for custom fonts automatically, but in some website builders you’ll need to set fallbacks manually. 

Keep in mind that your fallback font will not be a perfect swap — differences in letter spacing and font weight can affect how text appears on the page. 

Learn more about using custom and fallback fonts. 

Web safe doesn’t have to be boring 

No one is asking you to design an entire site using only Arial. Just be mindful of how you use fonts that aren’t so web safe — reserving them for headings or images and always setting fall back fonts. 

Learn more about using custom fonts or show off the great typography work you’ve already done by submitting your site to Made in Webflow.