Forums

Give help. Get help.

  • # January 15, 2013 at 2:00 pm

    I’m using the good ol’ [Google WebFont Loader](https://developers.google.com/webfonts/docs/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?

    # January 15, 2013 at 2:04 pm

    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.

    # January 15, 2013 at 2:13 pm

    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

    # January 15, 2013 at 2:35 pm

    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.

    # January 15, 2013 at 3:28 pm

    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)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag