Quick Tip: Tuning Condensed Fonts with WebFont Loader

Update: A more recent post on using the WebFont Loader for better control over fallback fonts is available here.

With all the webfonts available for use on websites, we have to deal with something we haven’t had to worry about before: condensed fonts. Most of your standard typographic guidelines will still be the same, but the biggest difference is sizing and font stacks in your CSS.

In general, type sizes run a little bigger with condensed fonts; they take up less horizontal space so we tend to set them at larger sizes than we would a more normal font. But since there isn’t a condensed font among system fonts, we don’t have a comparable fallback option for browsers that don’t support @font-face, leaving us with oversized system fonts.

I’ve solved this problem on my personal site where I use Mark Simonson’s Proxima Nova Extra Condensed by incorporating some of the events in WebFont Loader to adjust the size of my text when @font-face isn’t supported.

If you’re already using Typekit, taking advantage of WebFont Loader is a snap since some events are included with the script that loads in your fonts. When webfonts are “inactive”, meaning that Typekit was unable to load or isn’t loading because the browser isn’t supported, a class of wf-inactive is added to the page’s html element. You can then set up some styles to rollback your condensed font sizes to more reasonable sizes for system fonts. Alternatively, you could approach this the opposite way and utilize the wf-active class that gets added to the html element when Typekit is working, then specifying larger sizes for your condensed fonts.

Type size comparisons from jasonsantamaria.com

From left to right: Proxima Nova Extra Condensed loading just fine, Trebuchet as a resized fallback, Trebuchet as a fallback without resizing.

Here’s how I do it:

h2 { 
    font-size: 22px;
    font-family: "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2", "Trebuchet MS", sans-serif;
    }

.wf-inactive h2 {
    font-size: 13px;
    }

You can similarly make use of another class called wf-loading that gets appended to the page’s html element as fonts are loading in so that you can provide alternate sizes to help with the FOUT on larger font files. Doing this can help avoid shifts in your page layout as different sized fonts are replaced.

Making sure your type looks and works well under varying conditions is a small detail, but one that will make your website that much more awesome.

11 Responses

  1. Eric Eggert says:

    Shouldn’t it be the other way around? If, for example the javascript isn’t loaded you are stuck with the oversized text size. I think the right way to do it is like that:

    h2 {
    font-size: 13px;
    font-family: “proxima-nova-extra-condensed-1″,”proxima-nova-extra-condensed-2”, “Trebuchet MS”, sans-serif;
    }

    .wf-active h2 {
    font-size: 22px;
    }

    Additionally this will decrease the chances of jumps because the font gets only bigger when there are typekit fonts available.

    1. Yes, like I said above, you can approach it either way.

  2. Andy Croll says:

    I sort of discovered this by accident. When the JS was failing on my site the Typekit fonts weren’t loading so I have gone down the .wf-active route as well.

  3. John says:

    This is very useful. In fact, I’m preparing my site for use with Typekit-delivered fonts. The typeface I’d chosen for extended text is smaller on the body. Increasing the size would have made for a too-large fall-back. Now I can have my cake and…

    Thanks.

  4. I chose the fonts, I bought it, I paid for it. I have no idea how to use it and no one is explaining it in my language which is English. Help!!!

    1. Tim Brown says:

      I’m sorry you’re having trouble getting started, Gail. Just send us a note at support@typekit.com with your blog/site’s URL and we’ll help out.

  5. Steve Dennis says:

    I’ve been having huge issues with the fonts jumping all over the place using WebFontLoader and the hooks, even when fonts should be fully cached. Curious as to why you’re not using this method on your live site at the moment Jason?

    1. Tim Brown says:

      Hi Steve, if we can help you figure out what’s going on, send a note to support@typekit.com with a URL where you’re experiencing this trouble.

  6. Mike Ferguson says:

    I’m still awaiting word from beta testers, but this trick APPEARS to have saved my TypeKit experiment from being a well meaning disaster. I sent out the newly minted pages for review and a surprising total of users saw font madness; I’m using a condensed font in my Kit and so sizes when way-big for them.

    That being said (and again assuming my testers return with good news; I can’t replicate it locally), this solution is still no match for users that disable JavaScript. Or as I call them, troublemakers 😉 I don’t count myself among them and I’m sure it’s mostly uber-goober tech types but we still want uniform rendering across the board.

    See for yourself: http://healthqwest.us/

  7. Mike Ferguson says:

    Follow Up: If you play with something long enough, you’re bound to break it. Thanks to Sean M. at TK for a detailed support letter that helped me get back in line after I got in over my head with a jumbled collection of code that not only crapped out on IE, it put the FOUT on steroids.

Comments are closed.