html - What kind of font files do I need for modern browsers, Android and IOS?

Question

I have these as my font files:

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot') format('embedded-opentype'),
    url('@{fa-font-path}/fontawesome-webfont.woff2') format('woff2'),
    url('@{fa-font-path}/fontawesome-webfont.woff') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf') format('truetype'),
    url('@{fa-font-path}/fontawesome-webfont.svg fontawesomeregular') format('svg');
//  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

Would just these meet my needs:

@font-face {
  font-family: 'FontAwesome';
  src: url('@{fa-font-path}/fontawesome-webfont.eot');
  src: url('@{fa-font-path}/fontawesome-webfont.woff2') format('woff2'),
    url('@{fa-font-path}/fontawesome-webfont.woff') format('woff'),
    url('@{fa-font-path}/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Would just the woff and woff2 meet my needs?

Answer 1

2020 edit

You just need WOFF2, with WOFF fallback for IE11 because it won't bloody die. Don't use eot (it's a dead format), svg (not just dead but retracted), or ttf/otf (normal opentype fonts containing lots of data that gets stripped out in woff2/woff conversion because it is irrelevant for web use).

Original answer

As also explained in this SO post, you just need WOFF. And here's why:

• eot was deprecated for a while, but is actually obsolete now that Microsoft only supports Edge, plus "the latest version of IE for supported versions of Windows", which is only IE11 at this point (Nov.2018). Both of these support WOFF just fine. Also note that everything older than Windows 7 is already out of support (Windows Vista SP2 was still supported under corporate enterprise licenses at the time of this answer but has since also reached end-of-life).
• svg was abandoned years ago. It was an interesting idea but turned out bad in practice because it was ludicrously huge compared to real fonts, and lacked features that are crucial for decent typography. The entire <font> chapter was removed from SVG2 and virtually all browsers that had support for it at some point in the past have since removed that support again (that's how bad it was). The only two browsers that still support svg fonts also support WOFF, so there is no reason to serve both.
• ttf and otf are OpenType fonts (both of them. They differ in extension for historical reasons, but unless you're making fonts, the differences between them are essentially irrelevant) that are intended for universal system use. Like installing on a computer or sending over to a modern printer for physical document generation. As such. they have a lot of bits and bobs that they need to support (the spec is rather large), many of which don't actually matter all that much if you're just rendering a web page to a screen. WOFF lets you get away with some simplifications in the OpenType font, and every browser that supports generic Opentype also supports WOFF. So again: just use WOFF.

The thing to realise is that WOFF is a byte-for-byte wrapper around OpenType fonts, but with (optional) lossless compression so that the font is smaller, making it faster to transmit from the server to the client, and indicates that the font is only for use on the web, which means that some of the requirements a font absolutely needs to meet to count as legal font on a universal type system are relaxed, so some more data can be shaved off.

I know Font Squirrel and other sites still generate the "have every format that ever existed!" kind of CSS font packs, but it's 2017 and we simply don't need these huge sets anymore. While even as short as three years ago these sets were best practice (using the 'bullet proof' approach to CSS in a browser landscape that was highly fragmented when it came to webfonts), today these packs are entirely unnecessary. Everything supports WOFF.

"What about WOFF2?"

WOFF2 is a revision of the WOFF specification, with a newer, better lossless encryption algorithm for the kind of binary data you find served on the web (WOFF2 uses brotli, rather than WOFF's "deflate") so if the browsers you're targeting support it: great. But check http://caniuse.com for that first; there are a lot of browsers that don't support it just yet, particularly on popular platforms (Windows's IE and Apple's Safari do not support WOFF2 right now. IE will eventually, but Safari... who knows)

"What about that subsetting thing Google fonts does when I ask for WOFF2?"

Indeed, WOFF2 also allows loading "one font" in chunks, by specifying how character subset loading should work, so that you can only load as much of a font as you need to support your users' locales. However, unless you run a website that needs to be available in several different localised versions, targeting specific markets on this planet in their native language, or you're running a site that teaches different languages all of which need to be styled with the same font family (which is highly unlikely) this is pretty much irrelevant to you.