Update Your @font-face Definitions to Just Use WOFF (and WOFF2)

I have been working to simplify this site, which means that I’ve been reevaluating decisions I made more than a year and a half ago. Many of these were based on assumptions that may no longer be valid. Since the initial build of this site, the browser support for @font-face file formats has changed dramatically. Previously it was a best practice to include four different file formats to get optimal browser support, but these days one file format suffices (at least so far as I’m concerned).

##My Previous Implementation You may know this as the “Bulletproof @font-face Syntax.”

@font-face {
    font-family: 'my-web-font';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf') format('truetype'),
         url('webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

My Current Implementation

@font-face {
    font-family: 'my-web-font';
    src: url('webfont.woff2') format('woff2'),
         url('webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

The browser support for WOFF is pretty good, so long as you’re comfortable not supporting IE8, Opera Mini, and older versions of Android. I’m more than okay with not supporting those, especially since they’ll still get a readable version of my site, which is really all that matters.

A benefit to including WOFF2 is that the file sizes are 30% smaller on average, although as of today the only browser that supports the format is Chrome. That said, I bet if I forget about this for another year that will change :)