8

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 here, 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.

Community
  • 1
  • 1
alexp
  • 3,587
  • 3
  • 29
  • 35

2 Answers2

3

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: enter image description here

IE9 - font loads on @font-face - and before background images: enter image description here

Opera 11 - font loads @font-face - and before background images: enter image description here

Safari 5 - font loads last (there is no favicon in my folder - Safari adds that by itself): enter image description here

easwee
  • 15,757
  • 24
  • 60
  • 83
  • Have you actually observed when browsers load the fonts? I read the same article (you may notice it's linked in my original question). What you have described is the same way he describes it in the article, but it does not match what I have seen. – alexp Aug 04 '11 at 16:40
  • @alexp - and what are your conclusions - I included some screenshots of font loading in dev tools in some of most used browsers (latest versions updated) - are you getting different results? – easwee Aug 05 '11 at 07:49
  • My conclusions are basically the same as yours here: FF/webkit loads fonts last. I had not tested Opera. IE downloads it before background images, but after images in the page. This does not match the assertions made in the Irish article. In all cases the font file is download after images that appear in the HTML after the @font-face declaration and after HTML elements styled with the font. – alexp Aug 05 '11 at 15:16
  • @alexp - dunno - been a while since I read that article. Anyway - the data is here - for ff and webkit workarounds would have to do more testing :) – easwee Aug 09 '11 at 07:27
-2

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.

Matthew Nie
  • 629
  • 5
  • 10
  • I agree with you to a certain extent. However, for most items that require downloads, such as script files, style sheets, etc, we can more or less control when they get downloaded by the order they're placed in the HTML. Whether the font should be downloaded earlier or later is somewhat irrelevant, I'm just saying I would like to be able to exert the same control of the download sequence as I am for almost any other type of resource. – alexp Aug 02 '11 at 19:37
  • To your point about it being purely a presentation resource: images are presentation resources as well, but even if I have text with a custom font that appears before an image tag, the image file gets downloaded before the font. It seems reasonable to want the presentation resources to download in the same order they are used on the page. – alexp Aug 02 '11 at 19:39
  • If you're trying those techniques and still seeing a delay, and more importantly, if your browser is caching the fonts, then you may be up against the behaviors of different browsers regarding displaying `@font-face` assets. – Isaac Lubow Aug 03 '11 at 03:17
  • I can imagining wanting control of this to avoid the text "popping over" from the default when the correct font is downloaded – GBa Aug 03 '11 at 17:46
  • This is definitely a problem! None of the text on the page that uses the font (or any of the text after it) can render until the font is loaded. – Annie Aug 03 '11 at 18:44