Search code examples
javascriptjquerycssfont-face

Using jQuery to know when @font-face fonts are loaded?

I am using @font-face and I hate that Firefox shows the default font, waits to load the @font-face font, then replaces it. So the whole page flashes with the new font.

Webkit browsers just don't display the text until the font is loaded and it is a much cleaner look.

So, I am wondering if jQuery could help me to know when all data on the page is loaded, including the @font-face file, so that I can then show my text? Is there a jQuery method that tells me when everything is loaded?

Solution

  • Ok, it was pretty easy. Basically I just set my text to:

    a.main {visibility: hidden;}

    and then add:

    $(window).bind("load", function() {
       $('#nav a.main').addClass('shown');
});

    Then make sure that the following is also in my css file:

    a.main.shown {visibility: visible;}