WOFF vs WOFF2

Both wrap the tables of an OpenType font and compress them, and a browser unpacks them into the font they came from, so nothing is lost. WOFF, first drafted in 2009 and a W3C Recommendation since 2012, compresses each table with zlib, the compression behind .zip files. WOFF2, a W3C Recommendation since 2018, uses Brotli, a newer compressor from Google, and first rearranges the outline tables, glyf and loca, so that they compress better.

The W3C’s own evaluation found WOFF2 files a median 24% smaller than WOFF on Google’s fonts. Our six, on the board above, fall either side of that.

WOFF2. Chrome has read it since version 36, Firefox since 39, Edge since 14 and Safari fully since 12: about 97% of the browsers in use. WOFF remains a fallback for older browsers. On a computer, install the .ttf or .otf: WOFF and WOFF2 are made for browsers.

In CSS, list WOFF2 first, since a browser takes the first format it can read: src: url(font.woff2) format("woff2"), url(font.woff) format("woff");.

It depends on the font. The six families on the board, each the upright file Google Fonts publishes, come out 19–37% smaller as WOFF2 than as WOFF, and 47–71% smaller than the .ttf. Lato, a static font of 3,023 glyphs, gains the most over WOFF.

What the file holds matters more than its format. Cut to the Latin letters an English page needs, the range Google Fonts serves for it, the same six weigh 43–114 kB as WOFF2, against 212–350 kB whole. Google Fonts does that cutting for you; when you serve a font yourself, a subsetting tool does it.

With a converter. fontTools, the Python library FontKind measures with, writes one with fonttools ttLib.woff2 compress font.ttf, and Google’s own woff2 tools do the same. The font that comes out is the same font, smaller.

Check the licence before you serve it: an open licence such as the OFL lets you put a font on a website; a commercial font needs a web licence, whatever its format. Every font on FontKind says which it is on its page.

• WOFF2: Brotli, about 97% of browsers. Serve this.
• WOFF: zlib, a fallback for older browsers.
• TTF or OTF: the font itself, to install on a computer.

• Kerning game
  Space the Word

  The spacing you play against comes from each font’s own file, and survives WOFF2 to the last unit.

• Sans serif
  Roboto

  Sans · variable, 18 named fonts upright

• Sans serif
  Open Sans

  Sans · variable, in width and weight

• Sans serif
  Montserrat

  Sans · variable, 2,747 glyphs

• Sans serif
  Lato

  Sans · static, a file a font

• Serif
  EB Garamond

  Serif · 3,247 glyphs

Is WOFF2 better than WOFF?

For a website, yes: it is the same font in a smaller file, and about 97% of browsers in use read it. Keep WOFF only as a fallback for older browsers.

Can I install a WOFF2 font on my computer?

Not as it is: WOFF and WOFF2 are made for browsers. Install the .ttf or .otf instead; a converter such as fontTools can unpack a WOFF2 back into one, where the font’s licence allows.

Does WOFF2 lose quality?

No. Its compression is lossless: the font a browser unpacks keeps the outlines, spacing and features of the file it was made from.

What MIME type does WOFF2 use?

Serve WOFF2 files as font/woff2 and WOFF files as font/woff, the media types registered for them.

1. W3C: WOFF File Format 2.0
2. W3C: WOFF 2.0 Evaluation Report
3. Wikipedia: Web Open Font Format
4. Can I use: WOFF 2.0
5. fontTools: WOFF2

• Kerning
  Drag a letter into place, then see how the typeface spaces the pair.
• Ligatures
  Switch ligatures on and off in real fonts, from fi to code arrows.
• Glyphs
  One character, 24 glyphs: see what a font actually draws.
• Serif vs sans serif
  The same letters in both, measured: serifs, contrast and when to use each.
• Types of fonts
  Five kinds of fonts and the styles inside each, in free fonts you can open.
• Font anatomy
  Pick a part of a letter to light it up, from the x-height to the overshoot.
• Font vs typeface
  One typeface, 36 fonts, two files: the design and what carries it.
• TTF vs OTF
  Quadratic or cubic curves: what a .ttf and an .otf hold, and which to use.

Every lesson