Using custom fonts on web pages

When I design a web page, I rarely give very much thought to the fonts.  My working assumption has always been that it’s best to just pick one of the half-dozen web-safe fonts and then move on to other design considerations.  Usually I choose a sans-serif (Arial or Verdana) for most of a page’s text, because I think all the serifs on fonts like Times New Roman create too much visual noise.

But recently I’ve given more thought to braving the wild world outside of the standard web-safe fonts.  This is possible thanks to the CSS construct @font-face, which recent browser versions have become better at supporting.

So how to take advantage of the non-standard fonts?  Google offers the easiest way, here.  They host the fonts on their CDN and provide you with a snippet of code to use on your web pages.  It couldn’t be any easier.  Or freer. And free is important when designing web pages on a budget.

I went looking for more free font options, making sure that they are free for commercial use as well.  The League of Moveable Type  has fonts you can use, and their manifesto makes clear their commitment to spreading free, custom fonts to web designers.  However, the site Font Squirrel seems an even more useful resource.  They distribute quite a few fonts in the form of “font kits” designed for easy inclusion on your pages. Unlike Google, you have to host these fonts yourself.  But the process is still quite simple.  Font Squirrel also has a tool that lets you create your own font kit from fonts on your hard drive.

So why would you want to use custom fonts?  They can enhance the visual appeal of a web page, if used appropriately.  With improved browser support, there is no longer a reason not to.  (Just be sure to specify backup font options in your CSS so your text will degrade gracefully on older browsers.)  Section headings are, to my mind, the most appropriate place to use creative fonts.  You may also want to use a “hand-written” font for signatures on posts.  For the main text on a page, you should always favor readability over design flare.  Your font choice here should be as readable as Verdana (which was designed specifically for online readability), or else you are doing your visitors a disservice.

So in conclusion, happy fonting.  I will begin to experiment with options beyond the web-safe fonts on future projects.