css - When do web-fonts load and can you pre-load them?

Question

I've noticed when using web fonts that they can initially can take a second to come up; like if you create a drop down nav menu, when you hover over the menu for the first time the whole menu will appear as just the background color for a second and then the text will appear.

This isn't really ideal and it leads me to believe that webfonts aren't downloaded when the CSS file is loaded, but rather when you first view them on the page.

But on the other hand, I already have the fonts installed on my PC so they shouldn't need to be downloaded, so that lends the question on why do they do this!?

Here is the CSS I use to load my webfonts:

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Italic-webfont.eot');
    src: url('../fonts/Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Italic-webfont.woff') format('woff'),
         url('../fonts/Roboto-Italic-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Italic-webfont.svg#RobotoItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light-webfont.eot');
    src: url('../fonts/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light-webfont.woff') format('woff'),
         url('../fonts/Roboto-Light-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Light-webfont.svg#RobotoLight') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium-webfont.eot');
    src: url('../fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('../fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: 500;
    font-style: normal;
}

Answer 1

When are webfonts downloaded?

Paul Irish made a simple page to test this: http://dl.getdropbox.com/u/39519/webfontsdemo/loadtest.html

It shows that most browsers download fonts when they're used in a page rather than when they're declared in CSS. I believe IE is the exception but I don't have it running to test right now.

The reason for downloading on usage rather than on declaration is to reduce unnecessary network traffic, e.g. if a font is declared but not used.

Can font downloading be avoided?

You're right that if fonts are already installed they shouldn't need to be downloaded. As @Patrick said above, this can be done using local(). It's placed before url() in the CSS and takes the name of the font (the PostScript name is subsequently needed for Safari on Mac OS X). Try out the following change to your CSS:

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: local(Roboto Regular), local(Roboto-Regular),
         url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Finally, to reduce font download times, you could make sure you're doing the following:

• Putting CSS before JavaScript
• Adding far-future Expires headers for the fonts (so the browser caches them)
• GZipping the fonts

Here's a good summary of dealing with font display delays: http://paulirish.com/2009/fighting-the-font-face-fout/