Firefox 3.5 was released earlier today, and joins Safari in supporting the @font-face rule with OpenType and TrueType font families, allowing you to use a wider range of fonts in your designs (as long as they are correctly licensed, of course).

One slight drawback of the technique is the blank space that’s displayed as the new font is loaded into the browser; this is especially unnecessary for users who already have that font natively on their system.

The way to get around that is quite simple; use local() to check if the font is on the user’s system first.

The syntax is:

@font-face {
font-family: 'Graublau Sans Web';
src:
    local('Graublau Web'),
    local('GraublauWeb-Regular'),
    url('GraublauWeb.otf');
}

You’ll notice there are two calls to local(); the first is for the full name, the second for the Postscript name; this is required for Safari in OS X.

The cascade is used so that only if the first two conditions aren’t met (that is, the font is not on the user’s system) will the third come into play, loading the font into the browser’s cache. This won’t get rid of the blank space, of course, but it will reduce the number of users who see it.

Here’s an example paragraph which will display in the excellent Graublau Sans Web family mentioned above — as long as you have a browser which supports the feature.

Don’t forget, you will need to declare the rule for each face (bold, italic, etc) in the font family. There’s a good introduction to the whole topic at Beautiful Fonts With @font-face.