[Web-Facing Change PSA] A better web font compression format: WOFF 2.0
Kenji Baheux
Web Fonts related Web Facing Change PSA.
tl;dr: support for a better web font compression format called WOFF 2.0 with Brotli is coming in M35. We are seeing a 30% gain over the existing WOFF 1.0 format from an analysis we ran on the whole Google Fonts corpus. The gains were even more impressive for our Asian font corpus where we saw up to 50%+ improvements (median for the whole corpus was at 24% ).
Background and motivation
According to the HTTP archive, 35% of the Alexa TOP 1000 web sites are using web fonts on their home page. Moreover, from an analysis we did on September 30th 2013, we learned that this number goes up to 62% when you look beyond the home page of these websites (see this ATypI 2013 presentation for more mind boggling metrics).
This has obviously implications for web browsers.
For instance, we know from our metrics that this significantly impacts the user experience: our web fonts metrics tell us that the median web font download time is around 300-400ms and that the 90th percentile is over 1s.
Also, early data from a newly landed set of metrics indicates that for 30% of the pages using web fonts, Chrome ends up showing blank text to the user because it’s waiting on web font downloads. When this happen, the user has to wait for 250 ms on average before being able to read the text (90th percentile is around 580ms; peak is at 3s which corresponds to recently landed 3s timeout after which we show the text in a fallback font).
This is far from being a great user experience.
Change details
So, we are making several changes in Chromium and Blink to improve the situation (e.g. CSS Font Loading, 3s timeout behavior, unicode-range).
WOFF 2.0 with Brotli is one of these.
We evaluated several approaches including alternative compression algorithms against the whole Google Fonts directory before settling down on the the current design. See our open source reference implementation for both the compressor and decompressor as well as our evaluation report.
Finally, we also have a draft for the Brotli specification that we intend to get into an IETF standard track in short order. See also the proposal for WOFF 2.0 itself which details all the preprocessing required before compressing a font with Brotli.
For web developers, the existing @font-face syntax can be used to serve WOFF 2.0 to the browsers that support it, along with the earlier formats to those that are not ready yet. Example:
@font-face {
font-family: "Open Sans";
src: local('Open Sans'),
url(http://fonts.example.org/v1/opensans.woff2) format('woff2'),
url(http://fonts.example.org/v1/opensans.woff) format('woff'),
url(http://fonts.example.org/v1/opensans.ttf) format(ttf'),
...
}
For font foundries, the reference implementation for the Brotli compressor can be used to create WOFF 2.0 with Brotli compatible web fonts.
For other web browser vendors, the spec and reference implementations should be sufficient to add support for WOFF 2.0. Also relevant: Sanitizer for OpenType.
Risks
WOFF 2.0 was announced in April 2012 after a year or so of exploration. Due diligence was done to make sure that we have settle for a reasonably optimal solution. We believe that we have reached a fairly stable state for the wire format so the risk of breaking early adopters is minimal.
Best,
Kenji on behalf of the WOFF 2.0 team