Checking for installed fonts with @font-face and local()

Warning This article was written over six months ago, and may contain outdated information.

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.

7 comments on
“Checking for installed fonts with @font-face and local()”

  1. Peter, I’m totally digging the font on your website using my shiny new version of Firefox 3.5!

    Neal G [July 1st, 2009, 03:26]

  2. It seems that Firefox 3.5 renders the font for a second or two as Times New Roman, and then after the font is loaded, renders it properly (if you use the web only method). Safari on the other hand leaves a blank space and then renders the font.

    I find Firefox’s technique a bit annoying as it seems ‘too noticeable’ almost like IE’s old ‘flash of unstyled content’ bug.

    Most of the fonts I’m testing with are from free font sites which I doubt many users have locally on their computers.

    Neal G [July 1st, 2009, 04:15]

  3. Hi Neal,

    The Blaugrau Web font family is very cool; I hope to see it used more often.

    Out of interest, what platform are you on? I hadn’t noticed that Firefox displays a serif font before loading in the new one.

    Peter [July 1st, 2009, 09:43]

  4. Hi Peter,

    Graublau also has a bold version, do we need to do anything special for OS X as you did with the regular font?

    Thanks, Karl

    Karl [July 3rd, 2009, 11:21]

  5. Hi Karl,

    Yes, you’ll have to declare it in the same way;

    @font-face {
    font-family: ‘Graublau Sans Web’;
    font-weight: bold;
    src:
    local(‘Graublau Web Bold’),
    local(‘GraublauWeb-Bold’),
    url(‘GraublauWebBold.otf’);
    }

    You can get the PostScript name of a font by opening Font Book and clicking ‘Show Font Info’.

    Peter [July 3rd, 2009, 11:48]

  6. […] Checa si la fuente que quieres utilizar está instalada en la computadora del usuario, para evitar descargarla inútilmente. […]

    ¿Y quién diablos es @font-face? [May 24th, 2010, 14:08]

  7. […] Checa si la fuente que quieres utilizar está instalada en la computadora del usuario, para evitar descargarla inútilmente. […]

    Tipografías en tu web. @font-face | MusaConfusa [January 24th, 2011, 07:46]