cssfontsfont-facewoffwoff2

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


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?


Solution

  • 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.