Experimenting with web fonts on the iPad
We’ve been counting down the days along with everyone else in anticipation of Apple’s iPad. While we were waiting, we started experimenting with the iPad simulator, seeing what works and what doesn’t. When we finally got our hands on the hardware, we spent the weekend digging in and testing. Here’s what we found.
No OpenType, No WOFF
It turns out that iPad ships with a version of Mobile Safari that is almost identical to what ships with the iPhone. And while it supports CSS @font-face, it won’t work with OpenType or WOFF fonts. Instead, using @font-face on the iPad requires fonts to be converted to the SVG format. Great news, we thought, and immediately started converting the Typekit library to SVG.
But we also ran into a few quirks. We did a bunch of tests with fonts served by Typekit as well as with fonts linked locally. The results were nearly identical:
Rendering multiple fonts and multiple weights/styles
Rendering multiple weights from a font family can cause Mobile Safari to crash, even when the individual font file sizes are small (<5k). In our testing, using two weights from a family caused Mobile Safari to crash on up to 50% of attempted page loads, and the crash rate seemed to increase as we increased the number of weights we added. You can avoid this crashing behavior by linking only a single weight per font family — we saw no crashing at all in that scenario. In fact, you can add multiple font families in this way (we tested up to 10) without causing crashing. And we’ve filed a bug with Apple to address the crashing issue.
Rendering undefined weights/styles
Next, we tried applying weights and styles that were not included in the font. For example, if you serve only a typeface’s normal weight, but use CSS to apply it to text that is also styled bold, what will that look like? Turns out, the text will display in the normal weight — it won’t be bold. Mobile Safari does not synthesize a bold, italic, or bold italic style from the normal weight of an SVG font.
Selecting text
SVG font-styled text in Mobile Safari demonstrates some unusual text selection behavior. Unlike the character-by-character selectability that we expect of text, we seem to be able only to select either the first character of a line, the first word of a line, or the entire line.
Conclusion?
We’re excited to roll out Typekit support for the iPad, and it looks like we should be able to do that in the next couple of days. However, because of these quirks in Mobile Safari’s support for @font-face, we’ll release this as an experimental feature that will be disabled by default — you’ll be able to enable support per kit in Kit Settings. We’ll post about it here as soon as it’s available, and we encourage you to experiment with it.
Have you been testing as well? Let us know in the comments.
35 Responses
Comments are closed.
This is really handy–thanks for the write up.
A couple of other things that might not work on the iPad (they don’t on the iPhone).
You can’t justify text and if you use “text-overflow:ellipsis” it will change the whole line to ellipses instead of the overflowing text.
If its so similar to the iPhone, does this mean we will get Typekit on the iPhone as well?
Also, that makes me think… can we not have a page somewhere on your site that lists browser support, so it’s easy to check quickly?
Yes, we’re working on support for the iPhone as well as other Mobile Safari clients.
We’ve got a browser support page over on GetSatisfaction: http://gsfn.us/t/c82j We’ll update that when we roll out iPad support.
I have never been happier using my credit card online than with Typekit. Thanks for looking into the situation… this Mobile Safari support stuff has been on my mind since the iPad was announced.
I’m excited to hear about expanding TypeKit support for Mobile Safari. Would it help to have users (like us) to file bug reports with Apple as well? I don’t know if the squeaky wheel gets the oil.
We esers likely don’t need to file any tickets, but if Typekit could share the ticket they filed, we can at least watch along. 🙂
Paul: we filed a bug through the Apple Developer Program, since the problem is very OS specific and Webkit Bugzilla doesn’t actually list the iPad as a platform/OS yet. Unfortunately, bugs filed through the Apple Developer Program aren’t publicly accessible. We’ll post updates here as we get them, though.
Gregory, Groovy. Thx for the heads up.
Thanks for this info. Anything of this nature that you can share is greatly appreciated.
I’m looking forward to iPad users seeing nice typography on my site, but I don’t like the idea of only using one font weight across the whole site just to support iPad users, and my site is far too small for me to bother with browser detection, etc… Have you considered an option to serve only one font weight to iPad users?
Hello, I have been checking your website for some time now and read most or your posts. Is there any way that I can subscribe so I get updates sent to my email? Cheers
I’ve been testing the typekit under the dev folder of my portfolio site (www.nmbdesigner.com/dev/index.htm). I’ve enabled the “enable ipad support” in the kit setting. The issue is that enabling the ipad support seems to disenable the font support in internet explorer. Is there a way around this?
thanks.
Sorry for the trouble, Nicole. I just looked at your site in IE, IE7, and IE6, and the fonts do appear to be working. And, actually, there shouldn’t be any connection between iPad support and Internet Explorer support. Are you still seeing the problem? Can you try reloading the page? It can take a few minutes for changes to your kit to be distributed across our network of servers. We can also help you out with this via email at support@typekit.com, if that works better for you.
Just thought you guys would like to know that if you enable the iPad/iPhone support on your kit, then typekit does not load within Google Chrome browser on Windows XP, but does load on Google Chrome on Windows 7.
I spent quite a while eliminating factors that caused my site to stop rendering typekit fonts on my computer in Chrome. I even updated Chrome to the latest dev version on XP, still not fix.
This did not occur in
Windows XP (IE or Firefox)
Windows 7 (IE, Firefox, or Chrome)
Mac (Safari, Firefox, or Chrome)
I unchecked the iPad and iPhone support option, saved the settings, republished and problem solved.
I’ll be opening a ticket on GetSatisfaction as well, to make sure this issue is at least known.
I loved your blog.Thanks Again. Cool.
Thank for all but I want to ipad or iphone’s logo font name or file.
Please anyone help me, thanks again!
I have switched on the iPad support and tested the site on the iPad which crashed right away. So I switched it off right away.
After reading about the multiple font weight problems I have updated my CSS and used the same font weights for the whole site and switched on iPad support again. Now the iPad renders without crashing but is using only the fallback fonts?
Regards
Fred
Thanks for the report, Fred. We did indeed find a problem with new kits not rendering fonts in iPad or iPhone. This affected kits published since Monday morning, when we released an update to our kit generator. We just fixed the problem, though, so you should see your Typekit fonts on the iPad/iPhone now.
I’ve noticed the same thing as Fred in regards to fallback/stacked fonts on iPad. I’m building and testing locally and the iPad enabling I’d done last week still loads on iPad, but any fonts i’ve added in different kits in the past 24-48 hours are no-shows. Hope this is helpful.
See my reply to Fred above. The problem should be fixed now. Thanks!
Looks like the iPad support is not working anymore. I have created a new test account andcreated a test page linked to the new typekit. Works fine in all browsers but doesn’t show any typekit fonts on the iPad….
See my reply to Fred above. The problem should be fixed now. Thanks!
Thanks for this. I’ve been sitting here trying to figure out why a site keeps crashing for about an hour. I was using bold and normal text in a few areas on two different TypeKit fonts. When I remove the bold everything works fine, it just has a little less impact than previously.
Have you heard any response about the bug from Apple? Does one expect a response from a company like Apple on things like this?
Apple has fixed this in iOS4. More details here.
thanks for info.
i’m enjoy with typekit
Thanks for this post. I’ve been trying to troubleshoot my website for about 2 hours now. Mobile safari crashes instantly on my website which uses multiple @font-face weights. I really hope apple fixes this bug soon.
Apple has fixed the crashing problem in iOS4, though iOS4 is currently only available for the iPhone. It will be available for the iPad sometime this fall. More details here.
Thanks for this excellent post, it allowed us to identify the cause of crashes for mobile safari quickly.
Appreciate the detailed update too, it allows us to keep our clients informed of limitations.
I’ve got a techie blog for my students that uses typekit – specifically Myriad Pro in various weights. I’ve just turned on iPad support, and I’m delighted to report I have not been able to cause a crash yet (iOS 3.2.2).
Many thanks for keeping on top of this issue. This semester, I recommended typekit to all my upper-level design students.
I recently purchased an iPad. Can you tell me how to install Telugu fonts on this ipbad?
Thanks
I’ve enabled iPad and iPhone support and don’t see the Typekit fonts loading. Do only certain fonts allow you to do this? I’ve tried with a couple now and no dice.
Hey, I had the problem with the crashing Mobile Safari as well (on the iPad) with my site as well. With the 4.2 iOS update it’s gone. The font rendering is just beautiful (like on the iPhone).
Works great… but in testing some of the fonts do have issues. Gloria Display Thin (love this font) works great on everything, but when viewed in the iPad the “O” has a bizarre rendering.
It’s been awhile, would you post a status update please?…