How to Use Cool Fonts on Your Website Even if They Aren’t on the Viewer’s Computer

If you’re a professional web designer you may already know this, but how many of you think that you need to stick to Arial, Helvetica or Times as the only fonts you can use on your web pages without using a graphic to display them? Just what I thought,  most of you. Well, I’ve got some good news for you. That’s old news.

It is possible to use a wide variety of fonts on your web pages, even some really fancy or funky ones for headlines if you want, and it’s really not difficult at all. The trick is embedding the font directly into the code for your page using CSS. Woah, don’t get scared, I’m about to show you just how easy it is and although there are a couple of ways to do this that require you to purchase the fonts, we have Google to thank for making it incredibly easy and free.

First I’ll briefly mention two websites where you’ll need to pay for the fonts you use. Typekit and Fontdeck are both excellent services but both require you to pay an annual fee to license the fonts you use although both offer a very large selection of fonts to choose from.

Okay, now back to Google and the free way to do it. Currently the Google Font Directory offers only 18 different open source fonts but each comes with several variations and I’m sure they’ll be adding more soon. Adding a font to your web page isn’t difficult but you will need to add a bit of code that Google provides when you select a font to the code for your page if you use the Google Font Directory and you’ll also need to know enough CSS to modify the font weight, size, letter spacing, etc. BUT here’s the really exciting part.

Google just launched a new service called the Font Previewer that gives you an on screen preview of a sample phrase for the font you want as well as controls to adjust the size, letter and word spacing, font weight, and the variant (bold, italic) — you can even add a drop shadow if you want — and then provides you with dynamically generated code as you make the adjustments. Once you’re happy with the results you simply copy the block of code and paste it into the code for your page and you’re done. No knowledge of CSS required.

Now that you know how easy it is to make your website distinct by using fonts besides the usual standard ones, do me one favor. Don’t go crazy and use a script font for your body text.