[jQuery, AJAX] $.get and pre-loading custom font(@font-face)

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>
[/CODE]

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’);
});
});
}
}
[/CODE]

[B]#mainCont[/B] and [B]#topNav[/B] are tags which use the custom font.

The problem is that despite the [B]div.loader[/B] 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!

Also in #JavaScript _↴