WOFF revolutionized web typography, cutting through competing and incompatible formats to create a single, universal webfont standard accepted equally by browser vendors, device manufacturers and font foundries. It’s been so successful that a strong argument exists for some sites to simplify their stylesheets by delivering only .woff fonts: the standard has been supported in IE since version 9, in Android since 4.4, and in every other browser for at least the past several releases.*

However, there’s still plenty of room for improvement, particularly in file size and delivery speed. Acting essentially as a wrapper for the OTF and TTF font formats, .woff offered some compression, but not the most efficient packing of information. Making font file sizes smaller makes pages render faster, avoiding the dreaded “Flash Of Unstyled Text”… which is where .woff2 comes in. Using an updated algorithm, WOFF2 creates fonts that are on average 30% smaller than traditional .woff font files, with no loss in quality.

Browser Support

Right now .woff2 has good and growing browser support: the latest versions of Chrome, Edge, Opera, Firefox and Android all render the font format. Obviously, support is not yet complete, so it is important that fallbacks and alternatives be considered.

Support from Web Font Providers

The news improves when it comes to web font providers: sending .woff2 saves them bandwidth, making support an obvious path to take. As the main driver behind the format, Google is at the vanguard of this transition. If you’re using Google Web Fonts on your site directly from the source, i.e. as a link or @import:

<link href="http://fonts.googleapis.com/css?family=Open+Sans"  rel="stylesheet">

…then there are no changes required: Google will automatically deliver .woff2 fonts to compatible browsers. To reduce delivery speed further, you could subset the font.

A quick survey of popular webfont providers shows differing levels of support for .woff2 as of January 2016:

Host	WOFF 2.0 Support Status
MyFonts	Yes
Typekit	Under consideration
FontDeck	No
FontSquirrel	Yes
cloud.typography	No statement yet

FontSquirrel's support for WOFF2 is particularly welcome: it means that their popular webfont generator now automatically creates .woff2 versions during conversion. Other font conversion tools, such as FontPrep, have yet to catch up to the new format.

Self-Hosting WOFF2

If you’re hosting and embedding fonts on your site, supporting .woff2 is simple: once you have the font file converted and uploaded, simply address it in your CSS as you would any other. Specify the .woff2 version at the start of the declaration, so that compatible browsers will load it and not the older .woff version:

@font-face {
	font-family: MyHostedFont;
	 src: url(myhostedfont.woff2) format ('woff2'),
	url(myhostedfont.woff) format ('woff');
}

Of course you can also turn the WOFF2 font into a DataURI, but that’s probably not worthwhile: the combined Base64 string of a .woff and .woff2 font will bloat your CSS considerably.

Server-side Support

Your server may need to be hinted to deliver .woff2 files correctly. After everything is in place, visit your site and check that your text is rendered correctly and that the WOFF2 version appears in the resources tab. If either condition is false, you should add the following to the .htaccess or server configuration file for your site:

AddType application/font-woff2      .woff2

Once those changes are in place your site should deliver visitors (and their compatible browsers) .woff2 fonts for faster page speeds and lower bandwidth costs.

* The sole exception being Opera Mini

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.