The Ultimate List of Web-Safe HTML and CSS Fonts

Believe it or not, your website’s font is part of your marketing message.

More specifically, it plays a crucial role in creating aunique brand identity. You likely notice particular “standard” fonts associated with established brands, especially in their logos. For instance, Facebook, Amazon, Disney, and Microsoft all have distinct fonts that set them apart. Most are custom-made and variations of existing fonts.

Not long ago, the same monotonous fonts appeared on almost every website, regardless of industry or brand. It was difficult to implement unique fonts because there was no way to display them properly on all browsers.

Previously, if a user didn't have your particular website’s font installed on their computer, their browser would display a generic font as a backup, such as Times New Roman.

As a result, marketers didn’t know how their web pages were being displayed to the end user. If a page’s content doesn’t perfectly adapt to a different font, the user can run into functionality and design issues.

Web-safe fonts solve this problem and are now a standard in web design. By choosing a web-safe font, you can rest assured your text will always appear as intended. The best part is that you don't have to just stick with serif fonts. Let's take a look at the different types.

What are the different types of web fonts?

For web-safe fonts, you can use serif, sans-serif, monospace, cursive, fantasy, and MS fonts.

• Seriffonts contain serifs, small decorative strokes that protrude from the main body of the letter. Serif fonts are easier to read in physical, printed formats, as the serifs lead the viewer’s eyes from character to character. Times New Roman is a serif font.
• Sans-seriffonts do not have serifs. Sans-serif fonts are easier to read on screens, so they are therefore much more common in website copy. Arial is a sans-serif font.
• Monospacerefers to fonts that have equal spacing between characters. Courier is a monospace font.
• Cursiverefers to fonts that resemble handwriting. Brush Script MT is a cursive font.
• Fantasyrefers to highly stylized decorative fonts. Luminari is a fantasy font.
• MSstands for Microsoft and indicates that the font was created for digital devices by Microsoft. Trebuchet MS is an example.

With so many advances in web design, it’s easy to wonder whether web-safe fonts are obsolete. After all, we now haveAI botsand adedicated framework for designing mobile pages. Surely a technology exists that makes all fonts web-safe.

But this is simply not true. Let’s discuss why web-safe fonts are still important today.

Web-safe fonts are the easiest way to guarantee a consistent user experience in case your preferred font doesn’t load correctly. You might have chosen the most beautiful font fromGoogle Fonts, but if you don’t pair it with a web-safe font in your CSS font stack, you risk rendering text that looks off-brand on your site.

Imagine, for example, the HubSpot site rendering in Times New Roman — all because we didn’t establish our preferred web-safe font on the backend. Time New Roman is perfectly web safe — the problem is that it’s defaulted to by the browser, so our website ends up looking inconsistent and, well, a little off-brand.

Here are a few of the reasons why you’ll want to use web-safe fonts.

1. Your HTML text will stay consistent.

If you use a sans-serif font on your website, you’ll want to choose a web-safe sans-serif font as a backup. To take the above example, HubSpot’s site would look strange with a serif font, because we only use sans-serif typefaces on our pages. If you came across the HubSpot site in Verdana, however, the change won’t be as jarring.

It’s also important to give the browser a few font backups for unique characters. Consider the registered symbol (®). If your preferred font doesn’t support this symbol, but the next one in your font stack does, you can ensure that the symbol looks similar to the original font.

2. The browser will have several options before it defaults to its preferred web font.

All browsers have a default font they’ll render if, for some reason, they can’t load your website’s font file. You can delay this process by using a series of web-safe fonts in your font stack.

这将让你的字体“完全降低。”Instead of switching from Playfair Display straight to Times New Roman, the font can go from Playfair Display to Didot, a much closer alternative. If Didot isn’t available, then the font can switch to Georgia, and last, to the default serif font the browser uses.

3. You’ll have several backups if you’re using a self-hosted font.

Nowadays, you can easily connect to Google Fonts and use a font that’s accepted by most browsers. You’ll rarely find a page written in Open Sans that doesn’t render in Open Sans. But if you uploaded a custom font to your site’s hosted files, compatibility isn’t as guaranteed. Your web server might go down momentarily, or the end user’s browser might not support that specific font.

You can rest easy if you add web-safe fonts to your font stack. This will ensure that your font degrades in steps rather than defaulting immediately to the browser’s established web-safe font.

Font Stacks

CSS font stacks allow you to give several font backups to the browser. And they’re not just backups in case of technical or server failures, either. For example, consider a user who dislikes the system default font and deletes it from their operating system. You can’t control that, so it’s better to be safe.

To address this problem, CSS allows you to add a list of similar backup fonts in a font stack. A font stack improves your site’s universal compatibility with different browsers and operating systems. If the first font doesn’t work, the browser will try the next one in the stack, and so on.

To make a font stack, add several related font names to thefont-family财产。字体应该优先- th下令e font you want most should appear first, and a generic font family should end the list. Here’s an example:

p { font-family: “Playfair Display”, “Didot”, "Times New Roman", Times, serif; }

These are all serif fonts, ensuring the experience stays consistent. Alternatively, you can use another type of font across your font stack.

Do I need to download web-safe fonts to use them in a font stack?

No. Because these fonts are web-safe, there’s no need to download a font file. When you specify these fonts in your font stack, your browser will immediately recognize the font that you’re referring to and render it to the end user.

Let’s now go into some of the best web-safe fonts you can use.

1. Arial (sans-serif)

Arial is the most widely used sans-serif font on the web. It was created for printers who wanted to use the popular Helvetica font without the licensing fees. Therefore, they’re virtually identical.

Arial and members of the Arial font family are considered the safest web fonts because they’re available on all major operating systems.

2. Arial Black (sans-serif)

Arial Black is another related font in the Arial family. It's a very bold version more suitable for headers, decorative text, and emphasized text. However, its prominence means designers should use it strategically and carefully.

3. Verdana (sans-serif)

Verdana is popular both online and off. While it resembles Arial and Helvetica, it has a simple structure that makes the letters large and clear. Some of its characters have elongated lines, which may be incompatible with some designs. Otherwise, it's a solid alternative to Arial.

4. Tahoma (sans-serif)

Similar to Verdana, the Tahoma font sports a bolder weight and narrower tracking (i.e. less space between characters).

5. Trebuchet MS (sans-serif)

Trebuchet MS is another web-safe sans-serif font, designed by the Microsoft Corporation in 1996. It’s commonly used for the body copy of many websites and can be a solid alternative to your site’s sans-serif font. It also may not look as “basic” as Arial.

6. Impact (sans-serif)

Impact is a heavy sans-serif font great for drawing attention and creating … well, impact. It’s also notable for being a particularly narrow font — it’s characters have a higher width-to-height ratio than other comparable fonts.

Impact was first introduced to digital devices in Microsoft Windows in 1998 and has since seen a resurgence in popularity in internet memes, superimposed atop images for a humorous effect.

7. Times New Roman (serif)

Times New Roman is the ultimate serif font. It's extremely popular and the primary font for Windows devices and applications, like Microsoft Word. Browsers revert to it when the specified font can’t be displayed.

Technically, Times New Roman is an updated version of theTimes newspaper font, which is used in print newspapers and, as a result, is one of the most recognizable fonts in the world.

8. Didot (serif)

This old French typeface was originally used for printing presses. It’s notable for its elegant aesthetic and can add a formal quality to your copy.

9. Georgia (serif)

Georgia is another elegant serif font, but was designed to be more readable at different font sizes than other serif fonts. It accomplishes this with a heavier weight, making it an ideal candidate for mobile-responsive design.

10. American Typewriter (serif)

If you want to invoke a classic, nostalgic quality with your text, this is an ideal font to do it. American Typewriter imitates typewriter print and works well for stylized body text.

11. Andalé Mono (monospace)

Monospaced fonts have letters that are spaced equally apart, lending a mechanical quality to the text.

Andalé Mono is a perfect example of a monospace font. This sans-serif option was developed by Apple and IBM and has been frequently used in software development environments.

12. Courier (monospace)

Courier is a monospace serif font that closely resembles typewriter text. Many email providers use it as their default font. It's also widely used with coding application displays.

Note that the font Courier New is in the same family as Courier. You can list Courier after Courier New in your font stack to provide two different, but similar, options to the browser.

13. Lucida Console (monospace)

Lucida Console was designed to be a highly legible monospaced iteration of the broader Lucida typeface. It is monospace, but resembles human handwriting more than other monospace options we’ve covered, thus appearing less mechanical.

14.摩纳哥(等宽字体)

The monospace sans-serif Monaco font is native to macOS and will be more familiar with Apple users as a result.

15. Bradley Hand (cursive)

Based on designer Richard Bradley's handwriting, this calligraphic typeface evokes a casual, personal quality. It’s ideal for use in headings, decorative text, and short bodies of text.

16. Brush Script MT (cursive)

Brush Script MT is a heavily embellished script font designed to mimic quick handwritten strokes. While it can evoke nostalgia in some readers, it’s best to limit this font to decorative uses, as its style comes at the cost of legibility.

17. Luminari (fantasy)

Fantasy fonts are typically decorative and best used in headlines that only contain a few words. Luminari is a decorative font with a medieval quality. Use it to add a gothic essence to your web pages.

18. Comic Sans MS (cursive)

At last, we arrive at the font that everyone likes to poke fun at, Comic Sans. Designed to imitate the style of lettering found in comic books, Comic Sans MS carries an informal connotation and has been the target of many an internet joke.

Still, Comic Sans is useful for accessibility reasons: Because it lacks similar letterforms like p/q and b/d, people with dyslexia tend to experience less difficulty with it than with commonplace fonts.

Use Web-Safe CSS and HTML Fonts for Your Designs

Fonts selection might seem nit-picky, but it should be no small detail to marketers. Choosing a representative text style ensures that your message represents the brand and positively impacts your website campaigns.

As such, it’s important to be aware of how your fonts appear on different browsers and devices. Before you publish your website, make sure to test your font stack on various browsers to ensure compatibility, and be sure to use fallback fonts when necessary.

Editor's note: This post was originally published in March 2020 and has been updated for comprehensiveness.