The web has all of us trained on the idea of “web safe” fonts. And as much as I cringe at the thought days when people collected thousands of true type or postscript fonts, our current avoidance of fonts is a bit too drastic.
Designers are now trained to use only Arial, Verdana, Helvetic and sans-serif. But this is not how the web was designed. From the beginning, CSS was designed so that fonts can have several fall-backs so that the design can degrade gracefully.
Web browsers can also download the font specified by CSS. This is by no means a new technology but very few designers are exploring this option. It’s just easier to tell the client to stick to the “Web Safe” fonts. As web developers, we need to help the community expand the idea what is considered web safe.
Don’t worry, this is easy.
- Go to http://code.google.com/webfonts
- Find the font you want to use. Click on it.
- Click on the “Use this font” tab
- Copy the <link> tag and put it in your <head> block
- In the CSS, specify the font-family
That’s it! One line of HTML and one CSS property. Expand your universe of web safe fonts today.