What Kind of Font Files Do I Need for Modern Browsers, Android and iOS

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

2022 edit

You just need WOFF2, with WOFF fallback for legacy browsers.

• Do not use .eot, it's been a dead format for literally over a decade.
• Do not use .svg, it was a temporary format that wasn't just bad, but so bad it got retracted.
• Do not use plain .ttf/.otf. These are full fledged universal OpenType fonts containing tons of uncompressed data that is completely irrelevant for web use. It'd be like using PDF files for your images rather than JPG or PNG.

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.

Choosing the most ideal font format

woff2 is the modern "standard font" and is supported on modern browsers. Woff2 is a more compressed font, so the woff2 files are smaller then the woff files. To support modern and some older browsers, both the woff2 and woff files has to be there. The priority is to ask if the font is present on the device, if not then present Woff2, and if woff2 fails, load the woff font.

If you look at the performance, the woff2 is the best choice. The woff is a fallback for older browsers.

Note that not both woff2 and woff are loaded. If woff2 is supported, the browser will only load woff2. On the other hand, if woff2 is not supported, then only the woff is loaded. Presenting both is the best option.

WOFF2 : modern browsers
WOFF  : fallback if woff2 is not supported
TTF   : Android-browser on Android 4.3 or older
EOT   : Internet Explorer 8 or older
SVG   : iOS-Safari 3.2-4.1. SVG webfonts are not supported anymore in most browsers

Note that svg files are huge files and bad practice if you're working on performance optimization.

So for best performance, and for very good cross browser presentation, woff2 and woff are enough. Your css looks fine, first check local, then try woff2 and then, if woff2 fails, a fallback to woff.

RE: your comment

To test the performance, I uploaded a Bootstrap page with Font-Awsome and Open-Sans. These webfont files are located in a subfolder on my domain. Each font has this priority:

src: local('Open Sans Italic'),
     local('OpenSans-Italic'),
     url('../webfonts/OpenSans/OpenSans-Italic.woff2') format('woff2'),
     url('../webfonts/OpenSans/OpenSans-Italic.woff') format('woff'),
     url('../webfonts/OpenSans/OpenSans-Italic.ttf') format('truetype');

The waterfall diagram shows that from each webfont only the woff2 is loaded. If you do not have to support the old 'Android-browser' on Android 4.3 or older then remove the TTF line from this css example.

Which font file tyoe needed for Ionic apps

In develop websites, we use several font file type such as: .ttf, .svg, .woff, .woff2 and ... in @font-face because of the variety of browsers.

No we do not.

In 2016, coming on to 2017, we don't need any of those formats except for WOFF/WOFF2, because some of those formats don't exist anymore (eot, svg), and some of them are not for the web but are universal system fonts with far stricter parsing rules (ttf, otf).

See https://stackoverflow.com/a/37091681/740553 for the more detailed explanation.

Which Fontfile to use in a website?

As of this posting your selected typeface, FontAwesome , contains 3,332 different glyphs. You are more than correct to assume that loading this file five times over will take up some serious system resources.

However…

Often when using a webfont for icons, we only use a portion of the many icons defined in the font. If you are only using three or four glyphs from FontAwesome, then loading those five times should be a light-as-a-feather job for your system.

How to do this? Use a font-subsetting service. Free and easy-to-follow instructions on their sites. There are several, but personally I've had success with fontello: http://fontello.com

I have subsetted (verb?) about 20-25 icons from FontAwesome (more than I needed) to provide simple icons on my site, and the file sizes are under 60KB, collectively.

And of course, the reason we load these five times over? To maximize cross-browser compatibility. Plain and simple. This does it.

Thaana font on mobile web browsers

I wonder if the issue is the use of true-type fonts. Chrome (Blink) and WebKit browsers (Android stock) are supposed to support true-type, yet when I run this code in Chrome on my desktop I don't see Eamaan getting rendered.

This site uses Waheed and they're using the open-type font version which renders in Chrome fine. If the open-type font of Eamaan is available in the URL of your font-face rule, I'd suggest adding it.

Example:

@font-face {
    font-family: 'Eamaan';
        src: url('http://www.sun.mv/css/MvEamaanXP.ttf') format('truetype'),
            url('http://www.sun.mv/css/MvEamaanXP.otf') format('opentype');
}

You may want to expand it further to include .eot, .woff, and .svg for full support for font-face:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff') format('woff'), /* Modern Browsers */
        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Are eot, ttf, and svg still necessary in the font-face declaration?

October 2018 edit

tl;dr: use WOFF2, every modern browser supports it, with WOFF fallback because IE11 just won't bloody die (update: it finally got an EOL date of June 15, 2022), and without the local() source indicator, because you want everyone to use the same font, not "a different version or even completely different font that happens to use the same name".

The end.

Original 2016 answer

Short answer: no.

EOT is only relevant for IE8 and below (although as trivia: all the way down to IE4. IE actually pioneered webfonts), and SVG fonts as technology (not to be confused with OpenType fonts with SVG outlines) were abandoned (in early 2015) because the limitations were insane once real webfonts started to become available. As of 2016 you just need WOFF. And WOFF2 if you want to take advantage of the newer better version of WOFF that only just became a w3 recommendation (at the time of this answer).

To make things easier, as of January 12th 2016, Microsoft ceased support for IE8 and below, with limited support for IE9: they will now only support the latest available browser for each still supported OS, meaning that IE9 is no longer supported for Windows XP, because XP is itself no longer supported, but is technically still—begrudingly—supported until Vista SP2 and Server 2008 R2 reach the end of extended support in 2017 and 2020, respectively. Of course, for Windows Server 2008 webfont support is irrelevant, and most businesses that still use an old version of Windows skipped Vista, being either on Windows XP (at their own peril) or Windows 7 (which we can pretty much expect to all become Windows 10 in July of 2016, the 29th of which is the last date people can upgrade from 7/8.1—but not 8—to 10 for free).

(April 2017 edit: Windows Vista SP2 went out of support this month, and as such IE9 is now officially no longer supported)

As for TTF/OTF, you don't want to use these online any more than you would want to use TIFF images rather than JPG or PNG: even though WOFF is "just" a thin wrapper around a TTF/OTF data, WOFF/WOFF2 allow the data to be compressed, whereas plain OpenType does not.

Furthermore, TTF/OTF are universal (for systems that support OpenType) fonts, and so are scrutinized more for correctness, especially by versions of IE. Using WOFF, which as a filetype makes it explicit this is a Web (Open) Font (Format), a less strict form of scrutiny means that some fonts that would fail a system OpenType verification pass may still work just fine as webfonts (due to the fact that not all required-for-universality OpenType data is necessary for a font to work in just a web context).

Finally, you get a choice in WOFF formats: Format 1, just called WOFF, is the older format and uses compression based on deflate, similar to PNG compression; and Format 2, called WOFF2, is the newer format with compression based on the brotli algorithm, and also allows for "chopping up" a font into separate files for optimized delivery when dealing with unicode fonts that support multiple languages. You don't need all the files at the same time, so only deliver those files that cover the unicode ranges necessary for a specific page and you keep page size and load times down that little bit more.

In conlusion: hurray for the march of progress, just use WOFF (or WOFF2).

And, of course, remember to indicate the format of your @font-face sources using the format() value.

Font on mobile Website

As you can see here all current versions of all the major mobile browsers support .ttf fonts, however some slightly older mobile devices do not. For these you likely need to add embedded opentype fonts (.eot), Web Open Font Format (.woff) and Scalable Vector graphics (.svg) formats to support everything.

Your font declaration will look something like this:

@font-face {
    font-family: 'Aapex';
    src: url('fonts/Aapex.eot');
    src: url('fonts/Aapex.eot?#iefix') format('embedded-opentype'),
         url('fonts/Aapex.woff') format('woff'),
         url('fonts/Aapex.ttf') format('truetype'),
         url('fonts/Aapex.svg#Aapex') format('svg');
}

Safari on iOS unable to show a normal CSS font as bold

Safari won't display a font out of its available font-weights.

So if that font doesn't have bold type then it won't be bold in safari.

---

Related Topics