Disabling Typekit on Mobile

Edit: Typekit has posted some more info in response on their fantastic blog: http://blog.typekit.com/2014/02/20/using-typekit-web-fonts-on-mobile/

I’m putting some finishing touches on a talk coming up and I was looking into some details when including different web font options on our sites. I use Typekit a lot. I love it. I never really paid too much attention to the Kit settings > Mobile settings options before.

And I started thinking about the pay off between having custom fonts on mobile vs having our sites load faster. Chris Coyier wrote a great summary of some approaches to tackle this: http://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/ and there’s a post on the Typekit blog from Jordan Moore about using multiple kits and loading them based on breakpoint size (since no bandwidth testing was available) http://blog.typekit.com/2013/04/17/fallback-fonts-on-mobile-devices/

In this case, if we are using Typekit, should we just be disabling this mobile support that we have access to and letting fallback fonts be a browser/device safe font (i.e. Droid Sans)? It seems almost too good to be true to have these simple checkboxes, which are enabled by default, in which we can handle all the logic.

I read a bit more, such as in this Typekit blog post: http://blog.typekit.com/2012/11/01/announcing-windows-phone-8-support/, which says:

Following the pattern for our other supported mobile platforms, we’ve also added an option to disable support for Windows Phone in individual kits. You’ll find this option in the Kit Editor under Kit Settings > Mobile Settings. Uncheck the box for Windows Phone and republish your kit to turn off support. This option is useful if you’re building a responsive site that doesn’t require web fonts to be loaded on mobile platforms, or if you encounter issues with Windows Phone.

And I thought that certainly sounds like we can easily disable this. I did a very unofficial quick test to see what would load on mobile using one weight of Proxima Nova with everything enabled as on default which resulted in 32KB weight and 4 requests: http://www.webpagetest.org/result/140206_2N_dfc3ecd2d69159a6d9d148671b6f9477/1/details/

and then unchecked everything and ran it again and still had one Typekit JS request, resulting in 2 requests, 10KB http://www.webpagetest.org/result/140206_FG_22a5a9bfe7302d24e4a1c6479bbcdb81/1/details/

Sure, there are a ton of other things we can do to try to keep our page weights down, so maybe this isn’t the place to start? Here are questions that come to mind:

  • is there a better way to test this?
  • the speed index on this iOS test dropped from 3800 > 3000 when the mobile support was disabled , which still seems pretty high
  • will this work/save us enough to use it?
  • I only used one font/weight here, what if we disabled many?
  • should we be sacrificing type design for this?
  • are performance hits from web fonts on the top/middle/bottom of our list?
  • what about these mobile devices when connected to wifi? Is it cool that they never get the fonts? Worth the potential savings or no?
  • how should we be testing our fallback fonts? Is the extra testing/design time worth it?
  • are y'all disabling fonts through any of these approaches? If so, I’d love to hear about how it’s working out for you!!

So many questions!