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

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

Fire­fox 3.5 was released ear­li­er today, and joins Safari in sup­port­ing the @font-face rule with Open­Type and True­Type font fam­i­lies, allow­ing you to use a wider range of fonts in your designs (as long as they are cor­rect­ly licensed, of course).

One slight draw­back of the tech­nique is the blank space that’s dis­played as the new font is loaded into the brows­er; this is espe­cial­ly unnec­es­sary for users who already have that font native­ly on their system.

The way to get around that is quite sim­ple; use local() to check if the font is on the user’s sys­tem first.

The syn­tax 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 sec­ond for the Post­script name; this is required for Safari in OS X.

The cas­cade is used so that only if the first two con­di­tions aren’t met (that is, the font is not on the user’s sys­tem) will the third come into play, load­ing the font into the browser’s cache. This won’t get rid of the blank space, of course, but it will reduce the num­ber of users who see it.

Here’s an exam­ple para­graph which will dis­play in the excel­lent Graublau Sans Web fam­i­ly men­tioned above — as long as you have a brows­er which sup­ports the feature. 

Don’t for­get, you will need to declare the rule for each face (bold, ital­ic, etc) in the font fam­i­ly. There’s a good intro­duc­tion to the whole top­ic at Beau­ti­ful Fonts With @font-face.

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

  1. Peter, I’m total­ly dig­ging the font on your web­site using my shiny new ver­sion of Fire­fox 3.5!

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

  2. It seems that Fire­fox 3.5 ren­ders the font for a sec­ond or two as Times New Roman, and then after the font is loaded, ren­ders it prop­er­ly (if you use the web only method). Safari on the oth­er hand leaves a blank space and then ren­ders the font.

    I find Fire­fox’s tech­nique a bit annoy­ing as it seems ‘too notice­able’ almost like IE’s old ‘flash of unstyled con­tent’ bug.

    Most of the fonts I’m test­ing with are from free font sites which I doubt many users have local­ly on their computers.

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

  3. Hi Neal,

    The Blau­grau Web font fam­i­ly is very cool; I hope to see it used more often.

    Out of inter­est, what plat­form are you on? I had­n’t noticed that Fire­fox dis­plays a serif font before load­ing in the new one.

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

  4. Hi Peter,

    Graublau also has a bold ver­sion, do we need to do any­thing spe­cial for OS X as you did with the reg­u­lar 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-fam­i­ly: ‘Graublau Sans Web’;
    font-weight: bold;
    src:
    local(‘Graublau Web Bold’),
    local(‘GraublauWeb-Bold’),
    url(‘GraublauWebBold.otf’);
    }

    You can get the Post­Script name of a font by open­ing Font Book and click­ing ‘Show Font Info’.

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

  6. [
] Checa si la fuente que quieres uti­lizar estĂĄ insta­l­a­da en la com­puta­do­ra del usuario, para evi­tar descar­gar­la inĂștilmente. [
]

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

  7. [
] Checa si la fuente que quieres uti­lizar estĂĄ insta­l­a­da en la com­puta­do­ra del usuario, para evi­tar descar­gar­la inĂștilmente. [
]

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