It loads fonts just fine and all is well with the actual loading and whatnot. However, I'm using a font that is very narrow compared to a basic Arial or Helvetica. So when it loads, hidden or not, it causes things to jump around a bit when it finally loads.
So what is the best way to deal with this?
Add extra styles on the hidden elements to make them actually have a smaller font-size to keep things from jumping around when the thinner font is finally loaded?
There is a couple of things you could do. The first is to try to find a fallback font that has a somewhat similar x height than your web font. This should minimise the difference between the two fonts, and create less jumping. That is not always possible however.
The other option is to specify font-size-adjust [0]. There you can set the ratio for the fallback font (this takes a bit of trial and error) so that both fonts match as much as possible. This should also reduce the jerkiness. This doesn't have great browser support at present (Firefox and IE9+) though, so your milage may vary.
Yes but if you display:none; some elements that are simply containers will collapse because they no longer have any content.
And if you visibility:hidden; you will still see the jumping of elements as the narrow-width font is loaded.
This font-loader is great, and I can see what it wants to do, but I think I'm just missing a key step in making it happen smoothly.
Thank you guys for your help. My thoughts are reinforced now in terms of 'there will be trail and error'.
What about adding a class to your body that gets removed on page load. Then use that class to style the text to have negative letter spacing in your CSS?
I'll take a gander into that idea!
I have had multiple ideas similar to this cross my mind, but I was just wondering if there was a "standard" way of getting things to settle into place because a lot of the time I've found that different fonts have different sizes even if they have the same font-size.
In every example you see people hide elements until the font is loaded. That's cool, but you still see the containers of the elements jump around. Nobody has really tackled a best-practice way of dealing with it that I've found. Maybe my Google skills are lacking haha
I'm using the good ol' Google WebFont Loader.
It loads fonts just fine and all is well with the actual loading and whatnot. However, I'm using a font that is very narrow compared to a basic Arial or Helvetica. So when it loads, hidden or not, it causes things to jump around a bit when it finally loads.
So what is the best way to deal with this? Add extra styles on the hidden elements to make them actually have a smaller font-size to keep things from jumping around when the thinner font is finally loaded?
The only thing I can think of would be to have things set at an opacity of 0 until you're able to load the fonts in. Sort of crappy, though.
There is a couple of things you could do. The first is to try to find a fallback font that has a somewhat similar x height than your web font. This should minimise the difference between the two fonts, and create less jumping. That is not always possible however.
The other option is to specify font-size-adjust [0]. There you can set the ratio for the fallback font (this takes a bit of trial and error) so that both fonts match as much as possible. This should also reduce the jerkiness. This doesn't have great browser support at present (Firefox and IE9+) though, so your milage may vary.
[0] http://www.w3.org/TR/css3-fonts/#font-size-adjust-prop
Or double check to see if GWF adds a class to the webfonts, if so, display: none;
Typekit adds
wf-loadingso you can just set display: none; in your CSS.Yes but if you display:none; some elements that are simply containers will collapse because they no longer have any content. And if you visibility:hidden; you will still see the jumping of elements as the narrow-width font is loaded.
This font-loader is great, and I can see what it wants to do, but I think I'm just missing a key step in making it happen smoothly.
Thank you guys for your help. My thoughts are reinforced now in terms of 'there will be trail and error'.
What about adding a class to your body that gets removed on page load. Then use that class to style the text to have negative letter spacing in your CSS?
I'll take a gander into that idea! I have had multiple ideas similar to this cross my mind, but I was just wondering if there was a "standard" way of getting things to settle into place because a lot of the time I've found that different fonts have different sizes even if they have the same font-size.
In every example you see people hide elements until the font is loaded. That's cool, but you still see the containers of the elements jump around. Nobody has really tackled a best-practice way of dealing with it that I've found. Maybe my Google skills are lacking haha
Anywho, thanks for the help :)