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