What's the smallest set of web font formats that covers all browsers?

Question

I'm looking to use a web font that was only published in TTF. I'll need to convert it to other formats, and I'd prefer to reduce the amount of file conversion I need to do (partly so I don't need to test so many formats...).

What's the smallest set of web font formats that covers all major browsers?

Obviously including stock mobile and tablet (Android, iOS, Windows Mobile) browsers, and very common browsers on these platforms (though 3rd party mobile browsers usually aren't the problem).

Answer 1

tldr; woff covers almost everything. At time of writing, adding ttf also covers approximately 1% of global users on old stock Android browsers, and adding eof also covers approximately 1% of global users on IE8.

svg is probably no longer necessary, but do add a non-web-font fallback font because browsers not supporting any web fonts are probably at 5% globally or higher (Opera Mini, then user preferences).

---

This is based on http://caniuse.com and covers everything down to Blackberry Browser, MS Edge and Firefox for Android. Each link goes to the appropriate http://caniuse.com page. Bizarre note: in our font, ~ looks a bit like -, when you see ~, it's a ~, as in approximately:

• woff is a compressed open format and is the preferred default. It's supported by recent versions of almost everything; browsers that don't support it are:

  • The stock Android browser versions 4.3 and below (~1% of users globally)
  • IE 8 and below (~1% of users globally)
  • iOS Safari and Chrome versions 4.3 and below. Good news! These are less than 0.01% of users globally.
  • Opera Mini doesn't support any web fonts (up to ~5% of users). This is by likely by design (Opera Mini's unique selling point is aggressively prioritising fast page load and low data usage), but whether or not it actually blocks web fonts varies by platform and user settings. Treat this as "around 5% may see no web fonts".

So you can actually do pretty well with just woff. If you want wider support, here are the recommendations in order of % of global users:

• Add an appropriate fallback font to your font family, for Opera Mini (~5% of users globally) and any users who have web fonts disabled for any reason. But don't stress about this too much, since Android, which is one of the more common platforms for Opera Mini, has an incredibly limited selection of in-built fonts, usually lacking even the basics like Arial, Georgia and Verdana, and so unless you have a very strong preference between droid-sans and roboto, unfortunately the most important thing is simply ending your font family stack with a specification of sans-serif or serif.
• Add ttf if you want to support stock Android between 2.2 and 4.3 (~1% of users globally). Nothing works in stock Android before 2.2, but global usage is below 0.01%, so that's fine. ttf has good coverage across the board, similar to woff, but isn't compressed and only works in IE (including IE mobile and IE11) if it's set to "installable", so woff then ttf is preferable to just ttf.
• Add eot if you want to support IE 8 and below (~1% of users globally).
• Probably don't bother adding svg for old iPhones, given that global usage is <0.01%, unless you have your own data confirming these browsers are common among your users.

That's everything!