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

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

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.

Answer 2

I decided to post my own answer to this for two reasons: the currently accepted answer is slightly overzealous about using the WOFF2 and WOFF font stack in modern web dev without mention of other factors, and it also points heavily to official end-of-life dates, which don't reflect what browser versions are actually being used in the real world. In this answer I'll be sourcing CanIUse.com, which is an industry standard for keeping track of things like this.

Support for WOFF2

WOFF2 improves on WOFF in every way, is supported by most desktop browsers released after 2014, but has only since 2018 began to be supported by most mobile browsers. It's supported by an estimated 93% of browsers globally.

Support for WOFF

WOFF began to be supported by Internet Explorer in IE9 (released in 2011), which renders the EOT format obsolete for versions of IE released since 2011. It's supported by an estimated 97% of browsers globally.

Other desktop browsers began to support WOFF at roughly the same time, including Firefox since Firefox 3.6, Chrome since Chrome 5, and Safari since 5.1 (released in 2010, 2011 and 2011 respectively), rendering the TTF and OTF¹ formats obsolete in prior versions. Most mobile browsers have supported WOFF since 2013.

Caveat and Conclusions

From this standpoint, it's easy enough to write off all other formats as being unnecessary, but software no longer officially being supported has never been a good indicator that it's no longer being used. To put it another way, global browser version share is not guaranteed at all to be representative of the demographics that your website will be used by.

Browser version share can vary dramatically among demographics: factors like country, social class, and income all heavily influence what devices (and therefore, versions of browsers) your users are using. As a developer, think about whether the site you're building will be used by demographics that are more likely to be using those older versions.

If you decide that that's the case, and you need to support desktop browsers older than 2011, or mobile browsers older than 2013, use the full font stack: WOFF2, WOFF, TTF (or OTF), and EOT.

If you don't need to support those ancient browsers, and it's still true that you more than likely don't, simply use WOFF2 and WOFF as your font stack from hereon.

---

_{(1) TTF and OTF are traditional desktop font formats, and any browser that supports one supports the other, so never use both}