Google Fonts – alternatives for iPhone/iPad

The world of web typography got exciting a little while ago when Google unveiled it’s easy-to-use Google Font directory. The idea is a great one – a collection of web fonts that are served on Google’s powerful servers, and all you need is to include a CSS link.

There was one major drawback that kept me from wanting to jump in with both feet, however:

The web fonts in the Google Font directory won’t work on iPhones or iPads.

UPDATE: Google Fonts work perfectly well on iOS devices using iOS 4 and up.

The technical reason for this is because Google Fonts don’t have an SVG version. At this time, iOS devices only support SVG web fonts. I’m still not sure which side will bend first so that some form of support exists.

But, in what was a blindingly obvious revelation, I thought to check Font Squirrel and it’s directory of @font-face kits.

If you want to use Google Fonts, but want to include iOS devices, you just need to link to the Google Font per normal. Then have a locally hosted version of the SVG font, which is available from Font Squirrel and their kits.

I haven’t worked out the CSS code for this yet, but will update when I do.

I did check the Google Font directory agains what is available at Font Squirrel. All of the Google Fonts are there (with SVG versions) EXCEPT for two fonts, and one is a biggie. The two that are missing are IM Fell and Reenie Beanie.

IM Fell’s absence hurts, as it’s a beautiful font, and has a lot of variants. I’m not clear yet on weather or not you couldn’t just generate an SVG version of it from the Font Squirrel.

3 thoughts on “Google Fonts – alternatives for iPhone/iPad

    1. Oritzio-

      Without seeing the code, I can’t say for sure. Is it a specific font that is not loading for you on your site? If so, can you go to http://google.com/webfonts on your device and pull up the font on an iOS device? The system is not perfect, and I’ve seen some fonts simply not load for no apparent reason. I think it just means you have to have a good fallback in your font stack.

  1. Hi Chip, Thanks for the info. I had this problem yesterday when i installed the plugin, went throught the motions, and using something similar to browsershots.org, found that Macondo Swash Caps looked fine on my mac(where it’s been installed) but not on my iphone nor several other browsers.

    If you ever pen a tutorial to walk us through or offer us a work-around on getting google fonts to work on all platforms please shoot me an email.

    Thanks again for the information.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>