Question

Is there a way to not run a Javascript function until after a custom css font resource is downloaded.

I am displaying code in a <pre> and using the custom downloaded font Liberation Mono. The <pre> is also using custom scrollbars. The custom scrollbars Javascript (flexcroll) needs a static width set when setting up. But I can’t know the width until the Liberation Mono font is downloaded.

The CSS to load the font is below (complete with smilie-face syntax):

@font-face {
  font-family: 'LiberationMonoRegular';
  src: url('liberationmono-regular.eot');
  src: local('☺'),
    url('liberationmono-regular.woff') format('woff'),
    url('liberationmono-regular.ttf') format('truetype'),
    url('liberationmono-regular.svg#webfontkIKtf5pm') format('svg');
  font-weight: normal;
  font-style: normal;
}

The Javascript function I would like to do is something like the following. I’m taking a shot in the dark, and really don’t think this is possible..

$(function() {
    waitForFontExists('LiberationMonoRegular', function() {
        <do something>
    });
});

Answer 1

The Google WebFont Loader project allows you to work with various web font providers, and exposes callbacks including fontloading and fontactive. This might help, depending on your flexibility with font sources. I haven’t used it, but the docs state:

In addition to the google and typekit
options, there is also a custom module
that can load a stylesheet from any
web-font provider.

Aside from this, there are much hackier things to try — like checking the width of a sample rendering in the target font.