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.

Read More3 Comments


I know this has nothing to do with anything, but check out what I just pulled out of my garden:

Read More1 Comment


I spent a few hours over the last few days going through a massive style sheet from a project. This thing is a good 3200 lines of CSS.

I was going through each rule and alphabetizing the properties. So, something like this: p { width: 80%; margin: 0 auto 15px auto; font-size: 12px; line-height: 1.4; }

Would look like this: p { font-size: 12px; line-height: 1.4; margin: 0 auto 15px auto; width: 80%; }

I was doing this because the project is going to be handed off to another agency in the next few months. I don’t know who will be having to go through the style sheet, and I don’t know their ability.

But, if they are able to track down the rule they need to modify, they should have an easier time figuring out the property they need – quickly. Never mind that for the near term future, it will be easier for me to work with the file as well.

Is it a little over the top, like my senior developer told me (I believe the phrase “Anal Retentive” was used)? Probably.

I think that it will mean easier maintenance over the long run. Does this kind of approach help anyone else out there? Especially those working in environments where more than one person might work on a style sheet?

[I do know that there automated processors out there for this kind of thing, and I kind of used one. Most modified the rules a little too much for my taste, so I still did a lot of this by hand.]

Read MoreLeave a comment