WOFF Has Left the Building

In a recent project, the web fonts I bought and downloaded were only available as WOFF2 files. Staring in disbelief at the unpacked folder full of WOFF2 files, I wondered: Why did they not include WOFF files as well? Isn’t WOFF still needed? Or is it finally time to ditch WOFF? At least building for the Web includes regularly reevaluating how you do things. So, I asked the people of Mastodon. The unanimous answer: It’s WOFF2 or nothin’!

I still vividly remember how a post by Zach at the end of 2016 made me abandon the “bulletproof” @font-face syntax that also included TTF, EOT, and SVG font formats in favor of a much-reduced version using only two font formats: WOFF2 and WOFF.

Apparently, the web font world has changed once more and the new modern @font-face syntax now looks like this:

@font-face {

  font-family: "Open Sans";
  src: url("opensans.woff2") format('woff2');


Pretty simple, right? Just one format.

As Zach wrote in his article, “given that web fonts for readable content fall back to system fonts when formats are not supported, it’s ok to be progressive here.”

Which browsers are we sending into the dark lands of system fonts with this syntax?

  • IE 11, 10, 9, 8, 7, …
  • Chrome 4 through 35
  • Edge 12 and 13
  • Safari 3 through 9.1
  • Firefox 2 through 38
  • Opera 22 and below
  • Android 4.4.4 KitKat (less than 0.5 % of Android devices) and below
  • Mobile Safari (iOS) 3.2 through 9.3

According to Caniuse.com, almost 95 % of users have a browser with support for WOFF2 today. If you look at the date relative statistics, you’ll notice that the major shift happened in 2015 and 2016. By the end of 2016, all major browsers supported WOFF2 in their latest versions. Seven years later, support has grown to a level where it seems totally fine to not include WOFF anymore – unless you know for a fact that a large percentage of your users is still using older devices and browsers. On the other hand, there is no reason to remove WOFF from already existing projects either. If you include WOFF2 before WOFF in your @font-face syntax – and the order really matters here –, modern browsers will use and download the WOFF2 versions anyway.

But if you find yourself sitting in front of your computer one day, staring at a folder full of only WOFF2 files, it is comforting to know that WOFF has indeed left the building.


129 Webmentions

Photo of @matthiasott
@matthiasott Interesting. A thing i will keep in mind!
Photo of @matthiasott
@matthiasott this is a great post. Thank you! Anything that results in fewer files, less loading and particularly less typing and checking of code is 😎;
Photo of @matthiasott
@matthiasott Yes, it's definitely time to move away from WOFF! IIRC I kicked out WOFF on almost all work-related projects around 2019 when we ditched IE11 (?), for private projects even earlier. When still working on production-code I had created a recurring ticket to re-evluate the mixins and such to get rid of old vendor prefixes and other hacks...
Photo of @matthiasott
@matthiasott it's unbelievable how slow this stuff moves. Web fonts were standardized so long ago and there are still a handful of people on devices that don't quite support them 😮; Every time a new API or format is released, I'm like "yay in 10-15 years that will be really useful".
Photo of @matthiasott
@matthiasott the smaller size seems like a good thing . If you include more options (like offering ttf), the browser doesn't load them all, does it? That it didn't hurt to include more? Personally I'm a big big fan of the backwards compatibility of websites