Web “Safer” Font & Your Options
This is one of those “a client always asks, so I might as well document it for quick reference” topics. One of the most frustrating issues for people coming from the physical print and desktop environment to the web is the limitations of fonts. The long story involves licenses, ownership and platform issues. The short answers is that out of the thousands and thousands of fonts in the world, only a relatively few are present on MOST computers and are viewable reliably by guests to a site.
There are some techniques for bringing more fonts to the web experience from using simple graphics for high-impact parts of a site (logos, diagrams, etc) to technical ones like Scalable Inman Flash Replacement (sIFR), but they have some serious drawbacks and limitations. So, until CSS3 and HTML5 descend like the tooth fairy to solve all our web font issues, here is the state of things at the moment.
Web Safer Fonts
I use the term Web Safer Fonts because even though these fonts SHOULD be present on the systems/platforms listed below there will always be exceptions. You will find Microsoft Office slipping a few extra fonts onto an Apple or Linux machine and you’ll inevitably find a Windows computer which has lost some of the common system fonts.
| 2000 | XP | Vista/7 | OS X | Ubuntu | |
| Arial | |||||
| Comic Sans | |||||
| Courier New | |||||
| Georgia | |||||
| Impact | |||||
| Lucida Console | |||||
| Palatino Linotype | |||||
| Tahoma | |||||
| Times New Roman | |||||
| Trebuchet MS | |||||
| Verdana | |||||
Font Families in CSS:
Since some of the fonts found on platform to platform often share strong similarities, you can also use the font-family property in CSS to create fall backs. Some common ones include:
font-family:Verdana, Geneva, sans-serif
font-family: Georgia, 'Times New Roman', Times, serif
font-family: 'Courier New', Courier, monospace
font-family: Arial, Helvetica, sans-serif
font-family: Tahoma, Geneva, sans-serif
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif
font-family: 'Arial Black', Gadget, sans-serif
font-family: 'Times New Roman', Times, serif
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif
font-family: 'MS Serif', 'New York', serif
font-family: 'Lucida Console', Monaco, monospace
font-family: 'Comic Sans MS', cursive
But you can create your own to suit your needs. The browser will try to match the fonts in the order they appear until it reaches a match or lowest common denominator so the order is important.
