Optimizing Site Fonts with WOFF2
During the planning stage of this site's redesign, I thought of ways to make it fast. One way was to use WOFF2 fonts wherever possible, then falling back to WOFF for browsers that don't support it. Thankfully, newer browsers are starting to support the new WOFF2 compression format successor to the WOFF font format. On average, WOFF2 results in 30% smaller files compared to WOFF.
How to create WOFF2 fonts
These are easy to generate. Simply upload a TTF format of the font to one of the below services and it will generate a WOFF2 font file.
Or do it locally by installing Google’s compressor and running this from the terminal:
How to embed WOFF2 fonts in CSS (With WOFF fallback)
This is my current setup. The format property is crucial so that your browser can prioritize the font it needs to download.
- According to caniuse, WOFF2 is currently supported starting with Chrome 36, Firefox 39, Opera 29, and Chrome for Android 42.
- WOFF2 is disabled by default in Firefox and must be enabled in about:config. Set gfx.downloadable_fonts.woff2 .enabled preference to true .
- Internet Explorer does not currently support WOFF2, even in its edge version.
- As of version 8, Opera Mini still does not support WOFF2.
- GZip should be disabled for WOFFs since they already contain compressed data.
- Use the correct mime type:
- Google uses font/woff2
- W3C recommends application/font-woff2