Font Not in WOFF2 Format: What WOFF2 Is and How to Convert Your Fonts

What is a WOFF2 file?

WOFF2 (Web Open Font Format 2.0) is a W3C Recommendation for delivering fonts on the web. It contains the same glyph data as a .ttf or .otf file, but it is preprocessed and compressed with Brotli. Google reported an average size reduction of about 30% compared with the original WOFF format, and the savings over uncompressed TTF are usually larger.

Chrome, Edge, Firefox, Safari and their mobile versions all support WOFF2. The browsers that don't (Internet Explorer and very old Android WebViews) are no longer a practical reason to ship TTF or WOFF fallbacks.

What bseoa flags

bseoa reports this warning when a font resource on the page, either a <link rel="preload" as="font"> or a font file the page requests, has a URL that does not end in .woff2. A typical cause is an @font-face rule that still lists a TTF or WOFF file first:

@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/brand-sans.woff') format('woff'),
       url('/fonts/brand-sans.ttf') format('truetype');
}

How to convert a font to WOFF2

Use Google's reference encoder, which writes brand-sans.woff2 next to the input file:

woff2_compress brand-sans.ttf

Or use fontTools from Python, which can also subset the font so the file only contains the characters you use:

pip install fonttools brotli

# straight conversion
python -m fontTools.ttLib.woff2 compress brand-sans.ttf

# subset to Latin and write WOFF2 in one step
pyftsubset brand-sans.ttf \
  --unicodes="U+0000-00FF,U+2000-206F,U+20AC" \
  --flavor=woff2 \
  --output-file=brand-sans-latin.woff2

Check your font license before converting. Some commercial licenses only allow web use of the files the foundry supplies.

Update the CSS and preload

@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/brand-sans-latin.woff2') format('woff2');
  font-display: swap;
}

If you preload the font, point the preload at the WOFF2 file and keep the crossorigin attribute. Fonts are always fetched in CORS mode, so a preload without crossorigin is not reused and the font downloads twice, even from your own domain:

<link rel="preload" href="/fonts/brand-sans-latin.woff2"
      as="font" type="font/woff2" crossorigin>

Serve the file with Content-Type: font/woff2 and a long Cache-Control lifetime.

WOFF vs WOFF2

Both formats hold the same font data, so they look identical on screen. The only reasons to keep a WOFF file are browsers that can't read WOFF2, which today means Internet Explorer. For most sites, WOFF2 alone is enough.

Can you compress WOFF2 further?

Not with gzip or Brotli on the server. WOFF2 is already Brotli-compressed, so HTTP compression adds CPU time and saves almost nothing. The ways to make a WOFF2 file smaller are subsetting (dropping unused glyphs and languages), removing OpenType features you don't use, and loading fewer weights, for example one variable font instead of four static files.