Tutorials References Exercises Videos NEW Menu
Paid Courses Website NEW

CSS Tutorial

CSS HOME CSS Introduction CSS Syntax CSS Selectors CSS How To CSS Comments CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Height/Width CSS Box Model CSS Outline CSS Text CSS Fonts CSS Icons CSS Links CSS Lists CSS Tables CSS Display CSS Max-width CSS Position CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS Opacity CSS Navigation Bar CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors CSS Forms CSS Counters CSS Website Layout CSS Units CSS Specificity CSS !important

CSS Advanced

CSS Rounded Corners CSS Border Images CSS Backgrounds CSS Colors CSS Color Keywords CSS Gradients CSS Shadows CSS Text Effects CSS Web Fonts CSS 2D Transforms CSS 3D Transforms CSS Transitions CSS Animations CSS Tooltips CSS Style Images CSS Image Reflection CSS object-fit CSS object-position CSS Buttons CSS Pagination CSS Multiple Columns CSS User Interface CSS Variables CSS Box Sizing CSS Media Queries CSS MQ Examples CSS Flexbox

CSS Responsive

RWD Intro RWD Viewport RWD Grid View RWD Media Queries RWD Images RWD Videos RWD Frameworks RWD Templates

CSS Grid

Grid Intro Grid Container Grid Item

CSS SASS

SASS Tutorial

CSS Examples

CSS Templates CSS Examples CSS Quiz CSS Exercises CSS Certificate

CSS References

CSS Reference CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support

CSS Web Safe Fonts


What are Web Safe Fonts?

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

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;
}
Try it Yourself »

Best Web Safe Fonts for HTML and CSS

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

  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

Note: Before you publish your website, always check how your fonts appear on different browsers and 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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Try it Yourself »

Verdana (sans-serif)

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

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Try it Yourself »

Helvetica (sans-serif)

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

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Try it Yourself »

Tahoma (sans-serif)

The Tahoma font has less space between the characters.

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Try it Yourself »

Trebuchet MS (sans-serif)

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

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Try it Yourself »

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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Try it Yourself »

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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Try it Yourself »

Garamond (serif)

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

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Try it Yourself »

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

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Try it Yourself »

Brush Script MT (cursive)

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

Example

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

0 1 2 3 4 5 6 7 8 9

Try it Yourself »

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