Fallback for Typekit condensed font

[Johnnyb]

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?

[Johnnyb]

Any ideas?

[TheDoc]

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.

[Johnnyb]

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”?

[TheDoc]

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

[chrisburton]

@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.

[Johnnyb]

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

[joshuanhibbert]

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/

[Johnnyb]

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

[joshuanhibbert]

No worries!

[Author]

Posts