HTML/CSS

[Ray]

Hey!

Someone who's into this topic, please take a look at this website: http://www.celpont-music.com

I use a custom font, but on the main page, it doesn't load at first, as I imagine, because of the huge header image that loads first. Is there any way to force loading the font first?

[Statik]

Well, in different browsers I see different things.

Chrome: there is a little delay before the font loads.
Firefox: everything's ok.
Opera: the font doesn't load at all.
IE 7, IE 8: the page is broken (check here: http://netrenderer.com/index.php)

And about fonts, it looks like their behavior is brower-specific. I use custom fonts too and in some browser the default font is loaded first, then it is changed to custom font.

P.S. Hope you know this site to generate cross-browser fonts: http://www.fontsquirrel.com/fontface/generator

[Ray]

I used that. I haven't done any cross-browser fixing yet, it's a different story. Well, my connection is not that fast, it takes about 5-6 seconds for the image on the main page to load, so that's probably why the font doesn't load at first.

So yea:

Is there any way to force loading the font first?

[Statik]

There is no way. You can find the explanation here for example: http://stackoverflow.com/questions/4712242/wait-for-fonts-to-load-before-rendering-web-page

I see there are some ugly js workaroudns, but it's not the option for me :s

[Ray]

As it is possible, pretty simply, to preload an image using JavaScript, I find it hard to believe that it is not possible to make this happen.