Fun with Fonts

Posted: February 11, 2013 under Drupal

Modules are the workhorses of a Drupal site. Most are useful, some are essential, but there aren't many that qualify as fun. This tutorial is about one of those rare modules that is actually a real good time, @font-your-face.

For many years there were only about a dozen web safe fonts that you could use on your site. In retrospect, it was very boring. In the past couple years, however, things have completely changed. We'll skip the glorious story of CSS3 web typography for now and instead get straight into using @font-your-face to spiff up your site with some cool new fonts. 

Getting Started

If you're following this tutorial and you're working with one of our themes, the module will already be installed. If you're not using one of ours then download @font-your-face and install it.

After you're all set up, go take a look at the the list of modules included in the @font-your-face package. 

Font modules

You'll see that there are quite a few listed here. You won't need most of them unless you are using one of the font services associated with the module. For example, if you're a Typekit customer, enable the Typekit API module to use their fonts on your site.

The only ones we're going to focus on in this tutorial, however, are the core @font-your-face module, @font-your-face UI, Google Fonts API and Local Fonts.

Enabling Fonts

OK, now the fun part starts. Go to Appearance > Theme settings and you should see the @font-your-face tab like in the image below. Go ahead and click on it.

font face tab

What you should see is a list of your enabled fonts. If you've just installed the module, this page will be empty, but the next thing we're going to do will help fix that. Click "Browse all fonts" at the upper right of the screen and...boom! All the web fonts from Google should be waiting for you.

font images

Selecting Fonts

It will probably take you a while to browse the fonts and you might find it a little overwhelming at first. There are a few ways you can make it easier to find just the right fonts to use on your site. You can do a little trial and error experimentation - my personal favorite. You can check out a tutorial on how to pair fonts, particularly if web typography isn't your strong suit.

You can also visit sites you think have really cool fonts and take a look at the page source to see what they're using. The perfect tool for this is Firebug, of course, but the old right-click "View Page Source" will often work as well. 

Local Fonts

Let's say you've found a really cool font, but it's not available through Google. That means you'll probably have to pay for that font - not necessarily a bad thing - and then use the Local Fonts component of @font-your-face to add it to your collection. 

Let's keep this simple and go step by step:

  1. Pick your font and make sure it's OK to use it on the web. The vendor should be able to tell you or it will often be listed under a "web fonts" section.
  2. The site you buy your font from will probably provide it in the formats you need (yes, multiple files), but if not you can use the @font-face generator at Font Squirrel.
  3. Come back to your site and upload your font files.

Font upload screen

The screenshot above is where you'll upload your fonts. It's located at:

http://yoursite.com/admin/config/user-interface/fontyourface/local_fonts

You may be wondering why you need to upload four separate files to get your font set up. Basically it's a browser thing - you want it to work in as many browsers as possible and naturally there isn't a lot of agreement among the browser makers. Same old story, really.

Moving Right Along...

So now that we have our fonts enabled, let's apply them to some of the elements on our site. Head over to:

http://yoursite.com/admin/appearance/fontyourface

You'll see the main @font-your-face page we visited earlier. Below is a screenshot of our Sparta theme and you can see that the headings have the Lato font applied and the rest mostly use Open Sans.

Apply fonts

Changing the fonts that are applied to the various elements is as simple as selecting from the dropdown list. If you want more control, select "Other" from the list of options and a textbox appears and you can manually add them, copy and paste, whatever. That's what I've done in the screenshot above.

That's the ten cent tour of @font-your-face. I love it and even if typography isn't your thing, investing a little time picking out some nice fonts can go a long way toward making your site distinct. 

About the Author

John Hannah

I’m John Hannah, a front end developer at Lullabot . When I'm not building websites, I travel as much as possible and enjoy hanging out with my wonderful family. My favorite place to spend my coffee breaks is Twitter, so please feel free to connect with me there.