For every web designer there are some hurdles, one of them being web fonts. There are only so many fonts loaded on computers when you initially buy them so web designers need to know what those default fonts are in order to ensure the right fonts get used on your website. I’ve compiled a list of safe default fonts to use for the web.

– Georgia, Palatino Linotype, and Times New Roman are some default Serif fonts.

– Arial, Comic Sans MS, Trebuchet MS, and Verdana are some common San Serif fonts.

– Courier New, and Lucida Console are some examples of Monospace fonts that are default on most computers.

There are a number of ways to go about getting a custom font on your website. I don’t recommend using any javascript hacks to do this, although it does work. Using javascript for custom web fonts can slow down your website and can sometimes be buggy depending on the visitors browser they are using.

Typekit is my first good/easy way to show custom fonts on your website. Adobe just bought Typekit so the company may be going through some transitions sooner rather than later. Typekit doesn’t not offer free fonts. Some think they offer a higher quality fonts because of that. They also use a font loader which solves some issues like FOUT in Firefox. This can end up costing a bit of money just to get a custom font on your website. Typekit is $25 dollars a year for 50,000 page views/month, 2 websites, 5 fonts per site. Check out there pricing plan here.

An alternative to Typekit is Google fonts. Google fonts are free and they have a great selection to choose from. It is extremely easy to integrate into your website just like Typekit. Some say that Google fonts load a bit faster than Typekit fonts. Google fonts allow you to download the fonts to use in photoshop files for designing.

Typekit only allows for you to use them on your website, you can’t actually download the font to your computer.

There are quite a few other alternatives to getting custom fonts on your website. Here are a few…

sIFR (or Scalable Inman Flash Replacement)
cufon (javascript rendering)
Typeface (javascript rendering)
FLIR (combination of JavaScript and flash)
CSS3 (@font-face)

I’ve been trying out quite a few of these lately. Google fonts and Typekit are my top 2 that I would recommend. If you have any other suggestions or comments please let me know in the comments.

Leave a Reply