I’ve been sitting on this for a little while, so I thought I’d just go ahead and publish it. For an in-depth explanation of how I got these results, check out this post. In a nutshell, it shows that all of the main desktop browsers support some kind of @font-face format, so as long as you use something like the Bulletproof font-face syntax, your fonts will render in all of the the major browsers (e.g. those with > 3% market share). On mobile, it’s still a Mobile Safari-only party.
| Embedded Open Type (.eot) | TrueType (.ttf) | OpenType (otf) | Web Open Font Format (.woff) | SVG (.svg) | |
|---|---|---|---|---|---|
| Mobile Browsers1 | |||||
| 1 I haven’t had a chance to test Mozilla’s portable offerings | |||||
| Mobile IE (≤ WinMo 6.5) | No | No | No | No | No |
| Opera Mini (≤ v4.2) | No | No | No | No | No |
| Opera Mobile (9.7 Beta WinMo) | No | No | No | No | No |
| Palm WebOS | No | No | No | No | No |
| Mobile Safari (3.1) | No | No | No | No | Yes! |
| Android (≥ 2.2 SDK) | No | Yes | Yes | No | No |
| Desktop Browsers (Incomplete. I’ll be filling this in more over time) | |||||
| IE (≥ 5.5) | Yes | No | No | No | No |
| Firefox | No | Yes (≥ 3.5) | Yes (≥ 3.5) | Yes (≥ 3.6) | No |
| Safari | No | Yes (≥ 3.1) | Yes (≥ 3.1) | No | Yes (≥ 3.1) |
| Opera | No | Yes | Yes | No | Yes |
| Chrome | No | No | No | No | Yes (≥ 3.0) |
Tags: CSS, font-face, typography, web standards, webfonts
Hi — great analysis on this topic, thx. Have you seen any clues as to when font-face support is coming to mobile? We’re itching to get better font control on mobile.
It’s anybody’s guess really. Theoretically, we should be there soon given how the percentage of smartphones that use WebKit-based browsers. But as the table shows, being “Webkit-based” doesn’t mean a whole heck of a lot, since Android and PalmOS use Webkit browsers but don’t support @font-face at all.
Mozilla’s Fennec (at least the version that ships with Nokia’s Maemo OS on the N900) is good but not great. It renders TTF okay, but renders OTF at a smaller size, and doesn’t support SVG or WOFF, despite being based on Firefox 3.6.
So, like a lot of things in mobile development, if you’re willing to bet that most of your users are using iPhones, you can go ahead and use all of the cool new toys. Even if they aren’t, as long as you’re smart about picking your font stack in such a way that your layout doesn’t blow up and things still look pretty okay if your custom font isn’t supported, then you can still use @font-face.
I need to do more poking at Maemo & Fennec, and when I do I’ll update the table.
Hey Matt, great entry. I’ve been killing myself over attempting to add Hebrew characters to AlphaCards, my flashcard app for WebOS. What’s frustrating is that it looks like WebOS actually downloads the font (from the load time for given characters being displayed on-screen), but then doesn’t use it.