Web Safe Font Stacks

Finding a good font stack that conveys both the style of your website but is also reliable across the majority of websites out there can be tricky. If you use non-web safe fonts then your website might not look as you intend it to when the browser substitutes something surprising for your fancy font.

These font stacks are separated by family (serif, monospace, etc.). When you use a font that is not a web safe font, you should put it first in your font stack, and then add one of these stacks to the end. Choose the font stack that is closest in style and look to your ​preferred font.

Sans Serif Web Safe Font Stacks

Sans serif text is good for reading on web pages because there are no serifs to get blurry on the screen.

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;

Serif Web Safe Font Stacks

Serif fonts work great for headlines. The larger type of headlines means the serifs won't get blurry on monitors.

font-family: 'Book Antiqua', 'Palatino Linotype', Palatino, serif;
font-family: Bookman, serif;
font-family: Georgia, serif;
font-family: 'MS Serif', 'New York', serif;
font-family: 'Times New Roman', Times, serif;

Monospace Font Stacks

Monospace fonts are usually used to render code and other type styles that look best in a font where all the characters are the same width — like typewriter fonts.

font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: 'Lucida Console', Monaco, monospace;

Cursive Font Stacks

Cursive fonts can be difficult to read, and the most commonly found one on most systems (Comic Sans) is disliked by as many people as like it.

font-family: 'Comic Sans MS', cursive;

Fantasy Font Stacks

Like cursive fonts, fantasy fonts can be hard to read, and they are even less common across most systems. In fact, you may notice that I'm using the same font stack as one I used above in the sans serif category, that's because impact and charcoal are so distinctive that some people consider them fantasy fonts.

font-family: Impact, Charcoal, fantasy;

Dingbats, Wingdings, or Symbol Font Stacks

Dingbats or wingdings are symbol fonts that display little icons or pictures instead of letters. There is no generic font type for these, and so some computers may display very different fonts than you expect. Plus, only Internet Explorer will display the symbols. Firefox and other browsers simply display the text in the default font for the browser.

font-family: Symbol;
font-family: Webdings;
font-family: Wingdings, 'Zapf Dingbats';