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:
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
roboto, unfortunately the most important thing is simply ending your font family stack with a specification of
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
ttf is preferable to just
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.