The Ultimate Web Safe Font List for HTML and CSS FontsWeb safe font list of all the common fonts pre-installed on Windows, Mac and Linux so you can chose a typeface that works.
Discover the importance of web safe fonts in ensuring consistent typography across different devices and browsers. Our article explores why using these fonts is crucial for maintaining readability and visual consistency in web design.
This web-safe font list is a collection of the standard set of fonts common to all versions of Windows and their Mac substitutes, referred to sometimes as "browser-safe fonts" or "web-safe fonts". This list can be used to ensure that the fonts you use on your website designs will look similar on all platforms.
If a font is not installed on a user's computer, the browser will display a generic default font, such as Times New Roman. This can negatively affect the look and feel of a website and may even influence the design if wider or narrower fonts are used.
Introduction to Typography
Typography is one of the most important concepts in design. Poor typography selection can affect the performance of a product, be it a website or print.
There are two main types of font: serif and sans serif. The graphic below illustrates the difference between the two.
Traditionally, designers could use any font they wish. Once printed, they can rest assured that everyone will see the same design, layout and typeface.
Web designers face a greater challenge than print designers as they have to select a font family from a very limited list, as there is never a single font installed on 100% of computers across Windows, Apple and Linux operating systems. Even when the same font family is available, there is no guarantee that everyone will see the same exact thing due to differences in how various operating systems render them.
Because of this, web designers use what's known as a web safe font list, which lists the most commonly installed fonts on all machines.
Below are the most popular web-safe fonts with some sample text showing a sentence in bold and italic styles. It also shows the percentage of font availability on Windows, Apple Mac, and Linux. It provides an average "score" for the font.
The list also provides a web-safe CSS font stack you can use in CSS. It includes the intended font, alternative font, Mac, and, if available, Linux alternative.
Serif Web Safe Fonts
| Times Times Times Times | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 99% Average |
| font-family:"times new roman", times, serif; 99%99%99% | ||
| Georgia Georgia Georgia Georgia | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 80% Average |
| font-family:georgia, "times new roman", norasi, serif; 45%96%99% | ||
| Garamond Garamond Garamond Garamond | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 52% Average |
| font-family:garamond, "apple garamond", baskerville, times, serif; 23%49%86% | ||
Sans-Serif Web Safe Fonts
| Arial Arial Arial Arial | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 93% Average |
| font-family:arial, sans-serif; 82%99%99% | ||
| Verdana Verdana Verdana Verdana | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 81% Average |
| font-family:verdana, geneva, tahoma, kalimati, sans-serif; 45%99%99% | ||
| Tahoma Tahoma Tahoma Tahoma | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 81% Average |
| font-family:tahoma, geneva, verdana, kalimati, sans-serif; 45%99%99% | ||
| Trebuchet Trebuchet Trebuchet Trebuchet | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 80% Average |
| font-family:"trebuchet ms", "lucida sans", "lucida grande", sans-serif; 45%96%99% | ||
| Lucida Lucida Lucida Lucida | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 72% Average |
| font-family:"lucida sans", "lucida grande", garuda, sans-serif; 19%99%99% | ||
Web Safe Monospace Fonts
| Courier Courier Courier Courier | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 93% Average |
| font-family:"courier new", courier, andale mono, "free mono", monospace; 82%96%99% | ||
| Lucida Console Lucida Console Lucida Console Lucida Console | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 71% Average |
| font-family:"lucida console", "bitstream vera sans mono", monospace; 18%96%99% | ||
| Consolas Consolas Consolas Consolas | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 32% Average |
| font-family: consolas, monospace; <10%<10%96% | ||
Web Safe Fantasy, Cursive and Script Fonts
| Impact Impact Impact Impact | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 76% Average |
| font-family:impact, haettenschweiler, "arial narrow bold", sans-serif; 45%84%99% | ||
| Century Gothic Century Gothic Century Gothic Century Gothic | Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. | 71% Average |
| font-family:"century gothic","avant garde",'apple gothic',sans-serif 18%98%99% | ||
Font availability statistics from VisiBone Font Survey - Browsershare.
