The peculiarly bad situation with web-fonts on Apples iPad

I’ve thrown a lot of love in the general direction of Apples open source WebKit lately. It looks like WebKit, moreso than Firefox, has ousted every other browser as the rendering engine of choice for a richer web. Unfortunately, I’m about to throw something other than love at WebKits little-sister, Mobile Safari. Why? Because it’s useless at web-fonts.

Typekit’s talked about it:

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.

So that means you can use ONE weight of a web font. “Regular”, for instance. But you can’t use that fonts “Bold”, “Italic” or “Bold Italic” versions.

Just recently I wanted to use the glorious DejaWeb font for a project, and now that all the major browsers support web-fonts, I quickly fed the fonts to FontSquirrels excellent multi-platform font-converter and was output something that was supposed to work in all the browsers. EOT for Internet Explorer, WOFF for Firefox, TrueType for WebKit and SVG for Mobile Safari. Everything seemed to work just perfectly. Except of course for the intermittent crashes on the iPad.

A Temporary Solution

Now since the bug has been filed and Apple will probably fix this in some unannounced not-soon-enough future (maybe the iPad will get multitasking and font-face support at the same time?), I’m not going to waste any more tears. Instead I’m going to let you know what I did to deal with this issue.

At first, I worried that I wouldn’t be able to use DejaWeb at all, since this project had to be at least compatible with the iPad. I didn’t want to look into CSS hacks or JavaScript to detect user agents to then serve web-fonts to only capable browsers, carefully omitting the fonts for the iPad. Then it dawned upon me, a realization that in retrospect is embarrassingly simple (pointing and laughing for a little while is okay). Since MobileSafari can only render fonts converted to SVG, the solution to the crashes was to simply not serve an SVG font. Or in my solution, serve it only one SVG file: DejaWeb Regular.

@font-face {
	font-family: 'DejaWeb';
	src: url('fonts/DejaWeb.eot');
	src: local('DejaWeb'), local('DejaWeb'), url('fonts/DejaWeb.woff') format('woff'), url('fonts/DejaWeb.ttf') format('truetype'), url('fonts/DejaWeb.svg#DejaWeb') format('svg');
}

@font-face {
	font-family: 'DejaWeb';
	font-weight: bold;
	src: url('fonts/DejaWeb-Bold.eot');
	src: local('DejaWeb Bold'), local('DejaWeb-Bold'), url('fonts/DejaWeb-Bold.woff') format('woff'), url('fonts/DejaWeb-Bold.ttf') format('truetype'), url('fonts/DejaWeb-Bold.svg#DejaWeb-Bold') format('svgFIXME');
}

@font-face {
	font-family: 'DejaWeb';
	font-style: italic;
	src: url('fonts/DejaWeb-Italic.eot');
	src: local('DejaWeb Italic'), local('DejaWeb-Italic'), url('fonts/DejaWeb-Italic.woff') format('woff'), url('fonts/DejaWeb-Italic.ttf') format('truetype'), url('fonts/DejaWeb-Italic.svg#DejaWeb-Italic') format('svgFIXME');
}

@font-face {
	font-family: 'DejaWeb';
	font-weight: bold;
	font-style: italic;
	src: url('fonts/DejaWeb-BoldItalic.eot');
	src: local('DejaWeb Bold Italic'), local('DejaWeb-BoldItalic'), url('fonts/DejaWeb-BoldItalic.woff') format('woff'), url('fonts/DejaWeb-BoldItalic.ttf') format('truetype'), url('fonts/DejaWeb-BoldItalic.svg#DejaWeb-BoldItalic') format('svgFIXME');
}

Notice how I’ve invented a new font format called “svgFIXME”? Yep, that stays until the iPad can render SVG fonts in more than one weight. Until then, plain old regular it is. Even for bold-face text. It’s better than a crash, right?

2 thoughts on “The peculiarly bad situation with web-fonts on Apples iPad”

  1. Derryl says:

    I’ve been having trouble getting @font-face to work on the iPad as well, and finally managed to get it working. Turns out the actual SVG file I’d been working with was corrupt… #hoursofwastedtime

    In regards to the multiple font-weights crashing Mobile Safari, however, I did find a workaround. If you declare each font weight as a different family the crashes seem to disappear. Of course, this is an undesirable solution for multiple reasons. It should really only be used when you have a small number of elements with custom fonts, and only until Apple fixes this bug.

    For example, instead of declaring all weights as “DejaWeb”, one would define a family named “DejaWeb-Bold”, “DejaWeb-Regular”, and then style elements accordingly

    h2 { font-family: “DejaWeb-Bold”; }

    Like I said, this solution is very kludgy, and requires you to sacrifice a bit of flexibility in your stylesheet.

  2. RuneImp says:

    Is this still a problem now that iOS 4.2+ supports TTF fonts? I’ve been looking but haven’t found any specific info yet.

Comments are closed.