0

I'm using Head.js, Google Web Fonts, and pulling some content from elsewhere on the web (placeholder images).

What I've noticed is that on page load I see unstyled content, then my heading font loads properly, but not at the proper weight, and then the proper weight loads.

Any idea as to what is causing this odd behaviour with my header text? Should it not just go from unstyled to the proper requested font?

Also what is the best way to stop the FOUC thats friendly to people with javascript disabled?

Thanks!

Some more details:

I'm using Google's provided Javascript method to insert the 3 fonts I use. I can clearly see that it is loading 'Istok+Web:700:lating' , which means only the 700 weight should be provided.

Because of this method I do not use @font-face at all. Simply font-family as if it were a regular thing.

I am using LESS.js though, but from the network analyzer it doesn't seem to be causing any major slow down.

user974703
  • 1,653
  • 4
  • 20
  • 27

1 Answers1

0

This is simply caused by the browser displaying the website already before it downloaded all content. Do you have one @font-face css rule for all font weights, or do you have a seperate one for the normal/bold font weight? Please also note that although it is convenient to load the fonts from the Google CDN, it is not the fastest way (as a new http connection has to be established). //EDIT when you use the quick-use button, google does always set different font files for different weights...

A flash of unstyled content cannot be prevented when using head.js, as everything is loaded parallel while the browser tends to show everything it's got asap. Just pray everyone has a fast connection. And why should you mind at all? During loading you always see some kind of a half page...

giorgio
  • 10,111
  • 2
  • 28
  • 41
  • the FOUC seems to be able to be prevented (in theory) by using visibility:hidden, and then on head.ready set the visibility to visible. My issue with this solution is A) i can't seem to get it working myself, and B) people with javascript disabled would see nothing. – user974703 Oct 26 '12 at 09:49
  • but people with javascript disabled will not see anything anyhow, beacuse you load your assets with javascript... So if you want your site to be viewable, with styles and javascript effects, do not use head.js... – giorgio Oct 26 '12 at 11:20
  • they will see unstyled text. Which is fine. But if I were to implement a visibility:hidden, they would see *no* text. – user974703 Oct 26 '12 at 11:53