Fancy Fonts: How to use @font-face

Fancy Cat Typographer

Hey, I know some fancy stuff about fonts, thanks to my talented designer friend Sean Bellows! I know the difference between serif and sans serif; I know that most free web fonts are really only good as display fonts; I know about the ubiquity of Helvetica; I know certain people dislike Chip Kidd, but I don’t know why. It’s a good thing, because I get the feeling typographers do not suffer fools easily. So let me show you the world of web fonts and @font-face, from the perspective of a font dummy.

@font-face intro

I hear @font-face has been around for a while, but most people know it as part of CSS3. Basically, it allows you to use any font on your website. No longer are you restricted to the web safe fonts like Arial, Georgia, and the like. Sadly, no longer can your site look like this. Here is how you do it:

@font-face step-by-step

1. Get a font

Start by locating a web font that you like, and more importantly if you don’t have a ton of cash, one that is free. I have no idea why established fonts are so expensive–maybe one day Sean can explain that to me as well. Some good sites are:

The League of Moveable Type

Font Squirrel

DaFont (careful with this one–there are a lot of so-so and some just plain crappy fonts)

2. Get all the web font formats

You’re going to need multiple font formats for cross-browser compatibility. Most free fonts are only downloadable as “true type” fonts, unless you get one from The League, above. So if you only have a true type (ttf), head on over to the Font Squirrel converter, which will take your ttf font and create all of the necessary formats.

Once you have all of the formats (woff, ttf, eot), save them in your fonts directory, or wherever you’re going to link to in the CSS.

3. Drop in the CSS

Now’s the time to add the CSS to your style sheet. I usually place the CSS at the top of my style sheet. I don’t know if it makes a difference where it’s located, but I recall it being a bit buggy for me when it wasn’t placed right at the top. Now, there are a ton of different approaches to the @font-face syntax. I would highly suggest going with Paul Irish’s “bulletproof” approach, specifically the “smiley face variation.” This worked really well for me. In fact, it worked so well that my fonts appear on the iPhone and iPad just fine, flying in the face of the paranoid rumors that you need to use the SVG format for Apple devices.

Here is the code:

@font-face {
font-family: your-web-font;
src: url('../fonts/your-web-font.eot');
src: local("☺"),
url('fonts/your-web-font.woff') format("woff"),
url('fonts/your-web-font.ttf') format("truetype");
}

Now you need to call the font in the CSS:

#yourdiv {
margin: 0;
padding: 0;
font-size: 30px;
font-family: your-web-font, arial;
}

Be sure to always use a backup for the custom web font, such as Arial for sans serif fonts.

4) Check your site to make sure it works

If your fonts are properly saved to a directory, your @font-face is properly structured and linked to those fonts, and your font is called, then it should work. Also, don’t use IE 8 to check.

Creepy bugs

However, I’ve noticed some odd behavior with @font-face. For instance, I used an awesome font called Raleway from The League on my site. Sometimes, however, I’ve noticed that a strange ghostly fog settles over the font, making it almost unreadable. This seems to happen only on my mac and not on my PC, but is true for all browsers. It’s like the font “dims,” and then randomly it will brighten up again. To add to the strangeness, I’ve noticed that when the fog cometh over, it can be clearly seen on the iPad in portrait mode, but when I tilt it to landscape, the font brightens up. Bizarre. I chalk it up to some aliasing issue with OS X. I was able to manually “brighten” the font by using webkit-font-smoothing with a value of “none,” but that also made the text look like crap.

Also, sometimes if I skip the homepage of my site and go straight to, for instance, Photos while using Firefox, my custom web font will suddenly disappear, and Arial will show up. Then I’ll navigate back to the homepage, reload, and my custom font will appear. Again, bizarre.

Resources

In addition to those listed above, here are some good resources on web fonts (and fonts in general):

A great webkit-font-smoothing comparison from Christoph Zillgens

Classic sans serif fonts and some history from Andrew Keir

Liberation Serif – a free serif font I like

Open Sans – a free sans font I like

A list of quality sans fonts from thinkdesign

Advertisements
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: