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.
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 would display a generic default font, such as Times New Roman. This can negatively affect the look and feel of a website and may even affect the design if wider or narrower fonts are used.
Introduction to Typography
Typography is one of the most important concepts in design, and poor typography selection can really affect the performance of a product, be it a website or for 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, and once printed they can rest assured that everyone will see the same design, layout and typeface.
Web designers face a far greater challenge than designers for print as they have to select a font family from a very limited list, as there is never a single font that is 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 they are rendered by various operating systems.
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.
Shown below are the most popular web-safe fonts with some sample text showing a sentence, bold and italic styles. It also shows the percentage availability of the font on Windows, Apple Mac and Linux and provides an average "score" for the font.
The list also provides a web-safe CSS font stack which you can use in CSS and 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.
