Line25

Spice Up Your Web Typography with @Font-Face

Posted: 03 May 2010 12:00 AM PDT

We’re all used to making the most of the plain old web font stacks that have been around for the past 10+ years, everyone who’s designed a website will have no doubt written out Helvetica or Georgia hundreds of times in their stylesheets. Nowadays however, we have the option of embedding a whole new range of fonts into our designs. Let’s look at how the CSS @font-face rule allows us to get fancy with out future website projects.

View the demo

The @font-face is commonly referred to as a new CSS3 feature, but has actually been around for some years. The only problem was there weren’t any browsers to support it (apart from IE’s obscure EOT methods), so it sat collecting dust at the back of the CSS2 specification. Recently however, browsers have started implementing support for the @font-face rule. First came Safari (3.1), then Firefox (3.5), Opera (10) and Chrome (4.0). So now, any @font-face implementation will be available for a large chunk of your visitors. What’s more, if you insist on IE support you can even get everything working with a quick fumble around with Microsoft’s WEFT tool.

What about SiFR, Cufon, Typekit, [insert latest web-font solution here]?

Over recent years there have been amazing advances in web typography, with various solutions making use of Flash or Javascript to render unique fonts on web pages. I’ve heard great things about all these resources, so definitely check them out if they better suit the needs of your project. A couple of advantages include even larger font choices and wider browser support. I personally enjoy implementing @font-face simply because it fits right in as a native CSS declaration. It doesn’t rely on any weighty add-ons, or any messing around to get it working. Just a few extra lines of CSS and you’ll be rocking with your fancy font choices in no time.

To implement @font-face in your own website design, just add the following rule to your CSS stylesheet.

 @font-face { font-family: Blackout; src: url("path-to-file/blackout.ttf") format("truetype"); }

This snippet of code sets up the font-face rule. In plain english it says whenever the word Blackout appears as a font-family option, use this file. The file source is then listed, and specified as either Opentype or Truetype, depending on the nature of the font file.

 h1 { font-family: Blackout, Impact, Helvetica, Sans-Serif; }

All you need to do then is reference the font Blackout in your everyday font-stacks. Remember to add more universal backup options for those users with non-supporting browsers.

Don’t go font-facing every font you have on your computer, as the majority of font files aren’t licensed for you to go making them publicly available for download (which is basically what you’re doing with @font-face). As time goes on there’s more and more fonts becoming available for font-face use, and they’re pretty cool ones too! Here’s a roundup of the most popular fonts available for your font-face use. For even more, check out the Fonts available for @font-face embedding list at Webfonts.info.