Today most modern web designs include web fonts which are downloaded on demand by the web browser. Thanks to modern CSS 3 this is possible with the @font-face rule and even older Internet Explorer versions support web fonts. But there are a few things to watch out for and pitfalls to avoid if you want to use web fonts across all major browsers. (tweet this) Let start with the basic usage.

Basic Usage

The basic syntax for the @font-face rule is rather simply. At the beginning of your CSS file (this is important) you define the name and URL for your font:

@font-face {
  font-family: 'Abril Fatface Regular';
  src: url("AbrilFatface-Regular.otf");
}

Now you can use this font in any CSS declaration in your CSS file:

h1 {
  font-family: 'Abril Fatface Regular', sans-serif;
}

That’s rather easy, right? Unfortunately this will not work in all browsers out of the box.

Make It Cross Browser Compatible

Just like video or audio files, different browsers understand different web font formats. (tweet this)

• .woff files are supported by all modern browsers
• .eot files for older Internet Explorer versions (8 or below)
• .svg files supported by Safari 4 or lower
• .ttf used by older Android browser versions

So to support a wide array of browsers we need to supply these browsers the web font in a supported file format. Luckily the @font-face rule supports multiple URL attributes. The browser will automatically select the correct file format for it to use. So a cross-browser compatible @font-face rule will look something like this:

@font-face {
  font-family: 'Abril Fatface Regular';
  src: url('abrilfatface-regular-webfont.eot');
  src: url('abrilfatface-regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('abrilfatface-regular-webfont.woff') format('woff'),
       url('abrilfatface-regular-webfont.ttf') format('truetype'),
       url('abrilfatface-regular-webfont.svg#abril_fatfaceregular') format('svg');
 
}

Most of the time this will work in all major browser but you may need to adjust something to avoid the common pitfalls.

Pitfalls to Avoid

Some pitfalls to avoid when using web fonts with older browsers are:

• Internet Explorer 9 will download and use the .eot web font if declared even though it could handle other file formats as well. Unfortunately, there is nothing we can do to prevent that.
• Some browsers don’t allow to download fonts hosted on a different domain so in most cases you’ll need to host the font yourself or use cross-origin resource sharing
• While modern browsers will only download fonts that are actually used IE 8 and below will always download any font so you may want to remove fonts that are not actually used in the design to save bandwidth.

Summary

You see web fonts can actually be used quite easily in a cross-browser compatible way. If you want to learn more you can head over to Paul Irish for a detailed description of the @font-face syntax. Do you use web fonts? Let’s discuss this in the comments!

Photo by FontFont