web-safe fontsOftentimes our website clients ask about using a specific font on their website. Typical replies usually include web-safe fonts, font-families, and the newer @font-face option, so I thought I’d provide a quick & dirty summary.

Web-Safe Fonts

These are the handful of fonts that MOST people have installed on their computers. Some of the most familiar are Arial, Times New Roman, Verdana, and Comic Sans MS (don’t even get me started on this one). A more comprehensive list can be found at http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html and I also like the fact that this displays the fonts as we’re used to seeing them.

If you stick to one of these fonts, the majority of people viewing your site will see the same thing.

Font Families

Now, all that being said above, there are a few variations between PC folk & Mac folk. For instance, a common Mac font is Helvetica, which pretty much looks like Arial. Likewise, Mac’s Geneva looks like PC’s Tahoma. This is where Font Families come into play. When designating a font for a website, it’s always a good idea to use font families to cover your bases. So, if I want the body text to be Arial, I will add this to my CSS file:

font-family:Arial, Helvetica, sans-serif;

The point is to designate a few different font choices so that if a viewer doesn’t have Arial installed on their computer, they will then see Helvetica. If they don’t have EITHER Arial or Helvetica, they will see the next closest sans-serif font, or their system’s default sans-serif font.

@font-face

Huh? Well, for starters, let’s go back to Web-safe fonts. Web-safe fonts are fonts that almost everyone has installed on their computers. I personally have about a bazillion fonts installed on my computer, so if someone chose Buxton Sketch or McBooHmk for their web display font, at least I would see their site like it was intended. But what about ALL THE AWESOME FONTS out there! Why can’t you use all of them??? Well, @font-face is a step in the right direction. This piece of code allows you to link to an EXTERNAL resource for your font. @font-face has actually been around for quite awhile, but the big news was just a few months ago in May when Google announced the Google Font API and Google Font Directory: http://googlecode.blogspot.com/2010/05/introducing-google-font-api-google-font.html.

The good news is that there are a lot more options available to web designers than there used to be. The bad news is, there are still some quirks and a few display issues, like a flicker delay in Firefox.

I’ll spend a little more time in my next post about Best Practices (just because you CAN doesn’t mean you SHOULD) and general guidelines for choosing fonts for headings and body text.