There was a day when web designers had about ten fonts to choose from that they knew would display correctly on the web. It was a dark, desperate time. Don’t get me wrong, some of these fonts are pretty solid screen fonts; Georgia, Verdana and Trebuchet MS being my personal favorites. They read well and look decent. However, a handful of utilitarian fonts isn’t good for designing attractive, unique websites. Up until now, the go-to methods for getting a unique font on your website were to embed images or *shudders* use Flash. Thankfully, modern web technologies are making this a thing of the past.
CSS2 introduced a rule called @font-face that allows browser to download a font and render a webpage with it. However there was never a consensus on which font file format (alliteration!) to use on the web, so @font-face never took off… until now. Modern browsers now include support for most font file formats (I’ll never tire of saying that) and the web is starting to be a much nicer place for us typophiles.
Why is the ability to embed fonts into websites so awesome? Because there are now hundreds of fonts that you can use on the web and the list is growing every day. If one of your clients has a unique font as part of their branding, you can now use that font when building their website. If you want to make your blog have some extra pop, you can use a wild display font for your h1’s and h2’s. The world is your oyster, my friends.
Now you’re asking, “Where do I start!?” First, Six Revisions has a fantastic write up about @font-face and using fonts on the web. Read it. Next, go find some great web-ready fonts! The foundry FontFont makes some of the best fonts around. I must recommend FF Meta as a the most readable sans-serif you ever did see and FF Tisa as a delightfully personable serif. You should check out Google’s open source web font offering. Enjoy.
