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;
}

use `src: local()`. Also see: http://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded — Patrick, Nov 06 '12 at 11:17
Should your font-family names not be something like Roboto, RobotoItalic and RobotoBold? Also are you specifying something like 'Roboto', Helvetica, Arial, sans-serif when calling the fonts? — Billy Moat, Nov 06 '12 at 11:23
@BillyMoat To your latter question, yes I am. To your former question, nope, doing it that way means you will get issues when the web-font fails to download and the font is supposed to be bold for example. See: http://stackoverflow.com/questions/12562631/web-fonts-and-providing-fallback-fonts — Brett, Nov 06 '12 at 11:29
This post may help if you haven't come across it already: http://stackoverflow.com/questions/1330825/preloading-font-face-fonts — Billy Moat, Nov 06 '12 at 11:33
@Brett Should also be noted that `local()` is not supported by Android 2.2-4.0 browser. Font will not work at all. — Patrick, Nov 14 '12 at 03:46

tagawa · Accepted Answer · 2012-11-07T07:21:02.023

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/

Excellent advice. Can you elaborate a bit or provide a link for why putting CSS before JS improves performance? — Anthony, Nov 07 '12 at 07:24
The more general reason is that external scripts that are not dynamically loaded block further downloads & page rendering, not just while they're loading but while they're executing as well, so putting them at the bottom of the page is usually recommended. CSS, on the other hand, is usually needed first to avoid briefly showing an unstyled page. Regarding webfonts specifically, IE doesn't render a page until fonts have downloaded, if they're below a script tag: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/ — tagawa, Nov 07 '12 at 08:00

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

1 Answers1

Linked