Grow your CSS skills. Land your dream job.

Fallback for Typekit condensed font

  • # November 21, 2011 at 11:44 am

    Hey everyone. I’m using a condensed font through Typekit. I’m trying to come up with a decent looking fallback solution in case Typekit doesn’t load or if I end my subscription to it. I can use an @fontface condensed font as a fallback, but then that’s adding to my page weight and will be mostly redundant. I don’t mind falling back to a sans-serif font but if I do that then I’d need to reduce the font-size for the fallback font. Is that possible to do? I’ve checked out this page: http://blog.typekit.com/category/font-events/ and have tried out a few things but to no avail.

    I guess I’m asking for opinions. Would you just take the page weight hit and add a condensed @fontface fallback font? Or would you fallback to a “web safe” font and adjust the font-size if Typekit fails/isn’t active anymore?

    # November 29, 2011 at 11:52 am

    Any ideas?

    # November 29, 2011 at 12:15 pm

    Your font stack doesn’t have to be small. I would go from your fontface font, to the actual font name (on your local machine), to a similar font that people might have, and then to websafe.

    # November 30, 2011 at 4:43 pm

    Hey doc, thanks for the reply. If I’m using an @fontface font as a fallback is that font loaded even if it isn’t used? Or is it only loaded if it’s “fallen back to”?

    # November 30, 2011 at 5:43 pm

    That’s a very good question. I think you’d have to do some research there!

    # November 30, 2011 at 6:17 pm

    @JohnnyB to simply test: Use 2 different font files, 1 primary and the other for fallback. Then, just check with web inspector (network tab) to see if they both load.

    # December 1, 2011 at 10:47 am

    I guess I’ll give it a go then and see what happens! Thanks for the help guys.

    # December 1, 2011 at 5:04 pm

    Only IE downloads the font if it isn’t being used. I would recommend reading this article for more information: http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/

    # December 5, 2011 at 12:02 pm

    Awesome, that’s an interesting read, thanks @joshuanhibbert.

    # December 5, 2011 at 4:49 pm

    No worries!

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

You must be logged in to reply to this topic.

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