WOFF Has Left the Building

Posted by

134 Webmentions

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.

~

133 Webmentions

  3. Photo of Ronan Ronan
    @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 ????
  4. Photo of Lippe Lippe
    @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...
  5. Photo of Simon Eilting Simon Eilting
    @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".
  6. Photo of Goerp Goerp
    @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
    1. Photo of Matthias Ott Matthias Ott
      @goerp The Browser starts at the top of the @font-face rule and uses the first supported format it can find and only loads this file, yes. So for better support, you can always include more formats, of course. When it comes to the old formats like TTF or SVG, you’re loading huge files, so one could argue that it doesn’t improve the experience much because those people will be using older, less fast devices ...

49 Reposts

ⓘ Webmentions are a way to notify other websites when you link to them, and to receive notifications when others link to you. Learn more about Webmentions.

More Notes