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

Question

Up until now, I've used Paul Irish's bulletproof font-face syntax

But I was just looking at support for .woff and .woff2 files on caniuse and it says woff is supported in IE9+. Most articles on this topic are from around 2009, which at the time of this writing was a full 7 years ago. Do we really need to keep declaring ttf, otf, eot, and svg when woff now enjoys such wide support?

Answer 1

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, which 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.

October 2018 edit

WOFF2 is basically ubiquitous by now, so don't even bother with WOFF unless you know your audience is on obsolete devices, given that WOFF is inferior to WOFF2 in every respect.

Answer 2

I think using ttf is enough for all modern browsers and devices... I myself checked at ie, firefox, chrome, opera, android mobile (kitkat, mashmallow) and iPhone (6 to 7 Plus). It seems TTF is supported by all of above mentioned devices.