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?

Deaconry

Answer 1

October 2018 edit

tl;dr: use WOFF2, every modern browser supports it, with WOFF fallback because IE11 just won't bloody die (late 2022 update: Microsoft actually killed it on its promised EOL date of June 15, and the world is a better place for it), and without using 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.

Longer answer:

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.

Antonina

Yep, I'll second this notion. The only realistic exception I can think of is if you have some closed kiosk-type thing with old embedded systems/browsers that don't support WOFF, can't be upgraded and presentation using custom fonts is critical. But then you've got two problems (at least) :-) – Show

My area of caution on this is Android Browser, which has only recently supported WOFF. For that (admittedly only 0.6% usage), I'll probably go with keeping TTF. For these exceptions it's also worth considering whether that font may already be on the device. For example materializecss.com supplies Roboto as WOFF, WOFF2, EOT and TTF, but in the case of Android, I can rely on it already being available for Android 4.0 onwards (although not all Roboto's are the same - it got revised with Android 5.0). – Julie

Android has supported WOFF for three major versions now, and half of 4 (4.4.3 and on had stable WOFF support, 4.4.2 and below did not). – Redwood

Answer 2

06/20/2022 Update

My answer is now no longer truly relevant, unless you're working on some really specific use-case where you know truly antiquated browsers that should not be used anymore are still being used anyway (government work?). Keeping this here for posterity, but IE is now finally dead, at least for modern commercial applications.

(edited to move this to the top)

This is more of a 2019 addendum. At this point 09/18/2019, there is still substantial use of IE11, not to mention other more obsolete software.

As such, the accepted top voted answer is wrong in it's most recent edit from a year ago no less, that you only need woff2. At the very least you need both woff2 and woff, and you may want a more universal backup option even if it's less than ideal like svg.

While certainly you should first start by loading and supporting woff2 primarily, legacy support is just a fact of life and you probably will not be able to get away with only woff2 for several more years in any professional endeavor.

The most comprehensive modern option is likely woff2, woff as a fallback, and eot for IE. This hits all browsers in any significant use in 2019/2020

Example:

@font-face {
  font-family: "yourFontHere";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/yourFontHere.eot");
  src: url("../fonts/yourFontHere.eot?#iefix") format("ie9-skip-eot"),
  url("../fonts/yourFontHere.woff2") format("woff2"),
  url("../fonts/yourFontHere.woff") format("woff");
}

This is what a normal comprehensive font face declaration looks like.

See the following:Eot, Woff, Woff2

This covers everything except for Opera Mini, which frankly is less worth supporting than IE 6-8 due to being both a nightmare to support, and seeing very little usage.

However if you disagree with this assessment you can add an additional fallback line as needed just like the woff line. adding svg format to the example above will not only support all browsers, but there's also an argument to be made for including it for accessibility purposes. See here: Accessibility example

Searchlight

This should have just been a comment, so I could have edited my answer to include that entirely correct observation. I've updated the answer to include that in the tl;dr – Redwood

Unfortunately, I cannot leave comments on other answers. – Searchlight

Then this had the same effect, and you can safely delete answer-that-should-have-been-a-comment. – Redwood

I would not agree that your answer currently includes, or ever included in the past, sufficient relevant information to completely and accurately answer the OP question without significant unjustifiable bias. – Searchlight

But the fact that the OP accepted the answer literally demonstrates otherwise. – Redwood

It very literally does not do that. – Searchlight

"but there's also an argument to be made for including it for accessibility purposes" — Confused as to why you'd link to that presentation. I'm not asking about icons via a web font... – Deaconry

Answer 3

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}

Heliolatry

Related: how to convert TTF/OTF font files to WOFF and WOFF2 formats using the command line (and therefore, in bulk rather than one at a time). – Heliolatry