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