Are @font-face embedded fonts always the last things to download?
I'm using @font-face for the first time, and it seems like the font file is always the last resource to load on the page, no matter what. I'm using a Font Squirrel-generated kit with the smiley syntax. I've tried some of the techniques suggested h开发者_高级运维ere, among other places, to get the font to download earlier, including putting the font directly as data in the CSS and putting a styled element in the head section of the document. None of these techniques are working; in Chrome, FF, and IE the font file is always downloaded very last.
Is there any to affect the order in which the font loads?
There is a related question here, but it just links to the same Paul Irish post I mentioned.
Font loading differs from browser to browser (i guess you're reffering to FOUC).
I think the only browser that loads it as fast as it reads the @font-face rule is IE and Opera.
EDIT with samples:
Here are some net load lists for a simple site:
font-family
is called last in .css file - after all background images- font being loaded is
scriptbl-webfont
@font-face
is defined at top of css after the reset styles.
FF5 - font loads last:
IE9 - font loads on @font-face - and before background images:
Opera 11 - font loads @font-face - and before background images:
Safari 5 - font loads last (there is no favicon in my folder - Safari adds that by itself):
I'm not sure what your experiencing is a problem. To me using a different font that needs to be downloaded should be one of the last things to happen. The different font is a presentational piece, it's extra not required in my mind, let all of the required stuff download and then the extras.
精彩评论