Leave Arial and Times in the past — @font-your-face to the rescue

Posted by JD Collier on January 27, 2012

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.

More on enhancing your content

MONTHLY MARKETING INSIGHTS.

Get thought-provoking and actionable insights to improve how your firm makes a connection with your customers.

RELATED POSTS

LEAVE A COMMENT

The content of this field is kept private and will not be shown publicly.
About text formats

Plain text

  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
Submitted by eigentor on Sat, 01/28/2012 - 11:54am

Hehe I guess that's not what your after, but the Lucida Sans Font used on your very site appears to have some issues being rendered especially on windows machines. I am using Windows 7 / Firefox.
There are single pixels sticking out on top of the letters, must be some problem with the rounding of the top curves being exactly at the limit what works.
http://screencast.com/t/jXyeq3gncd2

I know the terrible / non-existent anti-aliasing on Windows is to blame. But does not help...

Submitted by Donna on Sun, 01/29/2012 - 7:42am

I'm really looking forward to playing with the font your face module after going to a web typography talk at Drupal Downunder a couple of weeks ago.

Pascal didn't go into a lot of detail about the module - but gave an awesome overview of how we can make typography on the web so much better...

Check it out
http://www.youtube.com/watch?v=0NJwkMyiAQ8
Simon Pascal Klein - Drupal, Web Typography and You.

Submitted by JD Collier on Mon, 01/30/2012 - 8:52am

Actually, we're not using the module on our site. How odd for Lucida to be an issue on Windows ... I haven't seen that before and it doesn't show up on my test machine.

Thanks for bringing it up, I think I'll try the module on our site to see if that helps.

Submitted by Jon on Sat, 02/11/2012 - 4:27am

Thanks for the module, very nice functionality for using @font-faces.

About Lucida, unfortunately it does render horribly on Windows machines without ClearType turned on. It looks much worse than you'd imagine, and there are slight variations in kerning that affect the number of glyphs per row.