androidhtmlioscssfonts

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


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?


Solution

  • 2025 edit

    You just need WOFF2

    And never use local, the whole point of a webfont is that you decide which font is getting loaded. Using local is the exact opposite of that: even if the font exists locally, you have no guarantee it's the same version. Or even the same font at all.

    Original answer

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

    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.