Hi all.

My website loads a custom font from the server. The CSS code looks like that and is placed just after a <title> tag in the HTML document

Code:
<style type="text/css">
    @font-face {
        font-family: "custom font";
        src: url("css/fonts/customFont.ttf") format("opentype");
    }	
</style>
The idea is to pre-load the font and after it's done fadeIn the content which uses this font. I want to prevent showing content with default font(FireFox) or not showing it at all(Safari). The jQuery code doing this is placed below:

Code:
function fadeInPage () {
    $('#mainCont, #topNav, #logo').css('opacity', '0');
    $('div.loader').fadeIn('slow');
    $.get("images/logo.png", fadeInContent);
        function fadeInContent() {
            $('#logo').delay(200).animate({opacity: 1}, 'slow', 'easeInCubic');
	    $.get("css/fonts/customFont.ttf", function () { 
	        $('div.loader').fadeOut('fast', function() {
		    $('#mainCont, #topNav').animate({opacity: 1}, 'slow', 'easeInCubic');
	        });
	    });
        }
}
#mainCont and #topNav are tags which use the custom font.

The problem is that despite the div.loader is visible couple seconds(indicating that the font is loading), after it fadesOut the content fadesIn and the custom font is not yet applied. It takes something like 0.5sec for the font to switch.

Have you got any suggestions what may be the cause of this delay and how to fix it?

Thanks!