Leave Arial and Times in the past — @font-your-face to the rescue
If you are a graphic designer or Drupal themer, you don't need to be stuck using Arial on your website; you can easily use a great typeface from one of several providers and implement them using a Drupal module called @font-your-face.
Web font providers have packaged up thousands of fonts for use on the web and have taken care of the licensing issues related to the copyright for each font.
Since web fonts require a special license, you won't find every typeface you may use on your computer. Various providers also vary in cost — ranging from free up to around $10/month. The most common cost is around $7 per year — pretty inexpensive.
It isn't difficult to implement the code from these providers in your theme, but I like the simplicity and administrative interface that the @font-your-face module provides.
The module currently works with the most common proviers: Typekit, Google Fonts, Font Squirrel, Kernest, Fontdeck, and Fonts.com. Once installed and configured, you can restyle elements of your site under the Appearance menu. You can browse or search for the desired font, then apply it. When you apply the font, you can choose which HTML or CSS selector for the font.
Words of warning
- I love being able to expand my selection of typefaces — take care, however, because I have found a number of fonts are not properly configured to work well in IE 7. You will know if it isn't working, as the type will look rough and difficult to read. This small issue won't stop me, though! I love to have beautiful typography on my site.
- Each font and attribute is usually a separate file that is downloaded to the browser. If I only change the font of the H1 tag, then I'm fine. If I decide to break design rules and use five different fonts with normal, bold and italic of each, I've just added 15 good size files to my page load time. Needless to say, less is more.