The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS FOUT when un-styled font is totally different size than styled

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #42011

    I’m using the good ol’ [Google WebFont Loader]( “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.



    Or double check to see if GWF adds a class to the webfonts, if so, display: none;

    Typekit adds `wf-loading` so you can just set display: none; in your CSS.

    Andy Howells

    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?

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.