bugl
bugl
HomeLearnPatternsPathsSearchPremium
HomeLearnPatternsPaths
Learn/CSS/CSS Foundations
CSS•CSS Foundations

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

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

Live preview

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)
  • 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.

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.

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.

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.

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.

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.

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.

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.

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9

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.

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.

Previous

CSS Text Shadow

Next

CSS Font Fallbacks

This chapter

Overview
108

Lessons

263m

Read time

1. CSS Tutorial2. CSS Introduction3. CSS Syntax4. CSS Selectors5. CSS Grouping Selectors6. How To Add CSS7. How To Add Internal CSS8. How To Add Inline CSS9. Multiple Style Sheets & Cascading Order10. CSS Comments11. CSS Errors12. CSS Colors13. CSS RGB Colors14. CSS HEX Colors15. CSS HSL Colors16. CSS Backgrounds17. CSS Background Image18. CSS Background Image Repeat19. CSS Background Attachment20. CSS Background Shorthand21. CSS Borders22. CSS Border Width23. CSS Border Color24. CSS Shorthand Border Property25. CSS Rounded Borders26. CSS Margins27. CSS Margin Collapse28. CSS Padding29. CSS Padding and box-sizing30. CSS Height and Width31. CSS Min/Max Height and Width32. CSS Box Model33. CSS Outline34. CSS Outline Width35. CSS Outline Color36. CSS Outline Shorthand37. CSS Outline Offset38. CSS Text Color39. CSS Text Alignment40. CSS Text Decoration41. CSS Text Decoration Styles42. CSS Text Transformation43. CSS Text Spacing44. CSS Text Shadow45. CSS Web Safe Fonts46. CSS Font Fallbacks47. CSS Font Style48. CSS Font Size49. CSS Google Fonts50. CSS Great Font Pairings51. CSS Font Property52. CSS Icons - Font Awesome53. CSS Icons - Bootstrap54. CSS Icons - Google55. CSS Links56. CSS Link Buttons57. CSS Lists58. CSS Tables59. CSS Table Size (Width and Height)60. CSS Table Alignment61. CSS Table Styling62. CSS Responsive Tables63. CSS The display Property64. CSS Hide Elements65. CSS The max-width Property66. CSS The position Property67. CSS Fixed and Absolute Positioning68. CSS Sticky Positioning69. CSS Position Offsets70. CSS The z-index Property71. CSS The overflow Property72. CSS overflow-x and overflow-y73. CSS Float74. CSS clear and Clearfix Hack75. CSS display: inline-block76. CSS Center Align77. CSS Horizontal Align78. CSS Vertical Align79. CSS Combinators80. CSS Pseudo-classes81. CSS Interactive Pseudo-classes82. CSS Structural Pseudo-classes83. CSS Pseudo-elements84. CSS Pseudo-elements for Text85. CSS Pseudo-elements for Content86. CSS Opacity87. CSS Navigation Bars88. CSS Vertical Navigation Bar89. CSS Horizontal Navigation Bar90. CSS Dropdowns91. CSS Advanced Dropdowns92. CSS Image Gallery93. CSS Image Sprites94. CSS Attribute Selectors95. CSS Advanced Attribute Selectors96. CSS Forms97. CSS Form Inputs98. CSS Form Focus and Icons99. CSS Form Elements100. CSS Counters101. CSS Units102. CSS Absolute Units103. CSS Relative Units104. CSS Inheritance105. CSS Specificity106. CSS Specificity Hierarchy107. CSS The !important Rule108. CSS Math Functions

On this page

What are Web Safe Fonts?Fallback FontsWeb Safe Fonts for HTML and CSSArial (sans-serif)Verdana (sans-serif)Tahoma (sans-serif)Trebuchet MS (sans-serif)Times New Roman (serif)Georgia (serif)Garamond (serif)Courier New (monospace)Brush Script MT (cursive)