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:

$ woff2_compress myfont.ttf

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.

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto/Roboto-Regular.woff2') format('woff2'),
         url('../fonts/Roboto/Roboto-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

Browser support

Server-side configuration

Nginx

types {
    application/font-woff2 woff2;
}

Apache

AddType application/font-woff2 .woff2