This site is 📱 accessible. Tap here to use the mobile stylesheet.

4.2.1 Font Web Safe

Web safe fonts are fonts that are universally installed across all browsers and devices.

Fallback Fonts

However, there are no 100% completely web safe fonts. There is always a chance that a font is not found or is not installed properly. Therefore, it is very important to always use fallback fonts. This means that you should add a list of similar "backup fonts" in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.

Example 1

Here, there are three font types: Tahoma, Verdana, and sans-serif. The second and third fonts are backups, in case the first one is not found.

p {
font-family: Tahoma, Verdana, sans-serif;
}

Best Web Safe Fonts for HTML and CSS

The following list are the best web safe fonts for HTML and CSS:

Note: Before you publish your website, always check how your fonts appear in different browsers and on different devices, and always use fallback fonts!

Arial (sans-serif)

Arial is the most widely used font for both online and printed media. Arial is also the default font in Google Docs. Arial is one of the safest web fonts, and it is available on all major operating systems.

Example 2 - Arial, sans-serif
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Verdana (sans-serif)

Verdana is a very popular font. Verdana is easily readable even for small font sizes.

Example 3 - Verdana, sans-serif
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Helvetica (sans-serif)

The Helvetica font is loved by designers. It is suitable for many types of business.

Example 4 - Helvetica, sans-serif
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Tahoma (sans-serif)

The Tahoma font has less space between the characters.

Example 5 - Tahoma, sans-serif
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Trebuchet MS (sans-serif)

Trebuchet MS was designed by Microsoft in 1996. Use this font carefully. Not supported by all mobile operating systems.

Example 6 - Trebuchet MS, sans-serif
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Times New Roman (serif)

Times New Roman is one of the most recognizable fonts in the world. It looks professional and is used in many newspapers and "news" websites. It is also the primary font for Windows devices and applications.

Example 7 - Times New Roman, serif
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Georgia (serif)

Georgia is an elegant serif font. It is very readable at different font sizes, so it is a good candidate for mobile-responsive design.

Example 8 - Georgia, serif
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Garamond (serif)

Garamond is a classical font used for many printed books. It has a timeless look and good readability.

Example - 9 Garamond, serif
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Courier New (monospace)

Courier New is the most widely used monospace serif font. Courier New is often used with coding displays, and many email providers use it as their default font. Courier New is also the standard font for movie screenplays.

Example 10 - Courier New, monospace
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Nanum Brush Script (cursive)

The Nanum Brush Script font was designed to mimic handwriting. It is elegant and sophisticated, but can be hard to read. Use it carefully.

Example 11 - Brush Script MT, cursive
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Tip: Also check out all available Google Fonts and how to use them.

CSS Course Home
Module 4: Text, Fonts and Icons