Hi peeps,

Ever had in mind using this nice looking, not web-safe font in your sites? The CSS @font-face rule has been around since the CSS2 specification. Yup, you’re right, it allows you to define custom fonts for your websites.

Damn, that’s nice! How does it works?

Its usage is quite simple, actually. Here’s an example:

@font-face {
  font-family: "Kimberley";
  src: url(http://www.somesite.com/fonts/kimberle.ttf);
}
h1 { font-family: "Kimberley", sans-serif }

Easy, huh? @font-face allows you to specify a font-family name (in our example, “Kimberley”) and the URI to a source file for the font, which can be downloaded by the web browser if needed.

A web browser implementing CSS1 (eg.: IE5-, FF1-, etc) will search the client (visitor’s computer) for a font-family that match “Kimberley” and if it fails to find it then it will use the browser’s default font (eg. Times New Roman). On the other hand, browsers implementing CSS2 (IE6+, FF2+, Opera 5.0+, etc) will first search the client for this font and if not found then it proceeds to download the font from the specified URL and continues rendering the web page.

The Good, The Bad and The Ugly

The Good: Fonts are operating system resources. If you have this unusual, nice looking font installed on your machine you can easily include it in your designs and locally deployed websites. You’ll be able to see it in your browser because you have it installed on your operating system. However, if your visitors/readers don’t have it installed too, their browsers will display their default font instead.

With the @font-face rule, you can stop worrying about having the browsers replacing your font with theirs. Instead, your font is downloaded with the page.

While this great CSS rule rocks, it has some major drawbacks:

The Bad: many of the modern web browsers do not fully support this rule (or not at all). We’re still stuck with the web-safe fonts until that changes. The @font-face rule is currently a part of the CSS3 Implementation draft so there might be a real chance that this could be usable in the near future… or maybe not.

The Ugly: you might actually lose visitors because now they have to wait until the font has been downloaded before the page actually displays. Fonts have an average size of 20kb - 30kb which can affect your page download times.

Also, some browsers might display a security alert which might scare your visitors away. That’s not good.

Final words

Hopefully, this rule will continue to exist once the CSS3 specification is finally released. It would be nice if we could use our own fonts, imagine all the possibilities! Web design as we know it nowadays would have a huge change if this was widely implemented by all current web browsers.

*Sigh* I guess we’ll have to wait to find out.