The Problem with Mobile Safari, &, and Subsetting Fonts

A couple years ago I read Jonathan Snook’s Spruce It Up article about subsetting fonts to get precisely the characters you need when building font stacks. Good stuff, and at the end of the article he casually drops the gold. If you only have a limited set of characters in your first font, the browser will just fill in the extra characters from the next one. This removes the need to wrap those characters in special markup in order to give them special treatment. For example it’s become fairly common to use a fancy ampersand from one font and set the rest of your text in another using markup like this:

Using Jonathan’s tip I wouldn’t need the extra <span> tag. In most browsers I’ve found this to be true, but in working on the mobile styles for this site I noticed that this isn’t the case in Mobile Safari in IOS devices.

At first I thought this had something to do with my use of Typekit on the site, but after testing it turns out this has no effect on this issue.

Unfortunately I haven’t found a solution that doesn’t need a <span> tag. However this doesn’t mean I’m constantly adding them manually. I’ve been a big fan of Christian Metts’ Typogrify tool for a while and I use the Drupal module with the same name. These tools look for &’s in your text and automatically wrap them in appropriate “extra” <span> tags.