Grow your CSS skills. Land your dream job.

Fallback “font-size” When Using Google Web Fonts

  • # April 4, 2012 at 2:35 pm

    Hey everybody!

    i’m trying to use Open Sans Condensed (a google web font) on a site i’m building, and i want to ensure the fallback font (in this case Arial) will be relatively the same size if javascript is disabled.

    after reading the typekit blog for awhile i thought i figured out the answer. i tried putting .wf-inactive h1 in my css and setting the font-size smaller, but that did nothing.

    do any of you awesome people know how to do this?

    __
    # April 4, 2012 at 5:55 pm

    @font-face is CSS, _not_ javascript.
    Whether or not it works has nothing to do with whether or not javascript is enabled.

    You can use javascript to help – using a script like modernizr, for example, can tell you if the browser is capable of using @font-face, and you can adjust the font-size appropriately if it’s not.

    However, that doesn’t specifically tell you if the custom font was actually downloaded successfully, or if it is actually being rendered.

    Webfont Loader would seem to be the better solution (I’ve never used it, but my understanding is that you would set your fallback font and size by default, and then use the callback function to change it once the custom font has been loaded).

    I have no idea how you could determine if a custom font was loaded (or not) when javascript is disabled. You might just use a “no-javascript” class on your and not use the font at all, in that case… But unless the difference in font-size is *terrible* I’d probably just “live with it.”

    # April 5, 2012 at 9:15 am

    You want to use the font-size-adjust property to change the x-height of each font, making each font about the same size. Here’s some good articles about it:
    https://developer.mozilla.org/en/CSS/font-size-adjust
    http://webdesignernotebook.com/css/the-little-known-font-size-adjust-css3-property/

    Sadly, though, there isn’t very good support for it.

    # April 5, 2012 at 9:36 pm

    The fallback should naturally be similar in x-height.

    # April 9, 2012 at 1:42 pm

    @cnwtx, it’s really too bad about lack of support for font-size-adjust, but at least we have that to look forward to.

    @traq, for some reason it hadnt really clicked that @font-face would still work without javascript until i read your post, thanks.

    after testing on every device i have access to and all the emulators on Browserstack im only seeing one edge case where it’s defaulting down the fontstack. ironically it’s the Google Nexus One.

    i’m going to take @ChristopherBurton’s advice on this one, and just pick a more suitable fallback font.

    thanks for the responses!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".