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