Font Compression: WOFF vs WOFF2

Format Comparison

*Brotli decompression is marginally slower than zlib, but the difference is negligible for typical font file sizes. The smaller download time more than compensates.

WOFF 1.0: zlib Compression

WOFF wraps font data with a new header and compresses each table independently using zlib (the same algorithm used by gzip). It's straightforward but not optimized for font data.

WOFF 1.0 File Structure
├── WOFF Header (44 bytes)
│   ├── signature: "wOFF"
│   ├── flavor: font type (TrueType/CFF)
│   ├── length: total file size
│   └── numTables, totalSfntSize, etc.
│
├── Table Directory
│   └── [tag, offset, compLength, origLength, origChecksum]
│
└── Compressed Table Data
    ├── Each table compressed separately with zlib
    └── Tables < compLength uncompressed

WOFF's zlib (DEFLATE) compression is the same algorithm used in gzip and ZIP files. It operates as a general-purpose compressor with no font-specific optimizations. Each table is compressed independently, which means patterns that span table boundaries cannot be exploited. The compression level (1–9) can be tuned during WOFF generation, with level 6 being the common default that balances speed and compression ratio.

WOFF's zlib (DEFLATE) compression operates as a two-stage algorithm: LZ77 for finding repeated byte sequences within a 32KB sliding window, followed by Huffman coding to encode those matches and literal bytes with variable-length bit codes proportional to their frequency. The 32KB window limit is a meaningful constraint for font data: the glyf table in a large Latin font might span 200KB, so patterns in glyphs near the beginning of the table fall outside the window when processing glyphs near the end. Higher zlib compression levels (1–9) extend the pattern search and produce smaller output at the cost of longer compression time; decompression speed is largely constant regardless of compression level. Level 6 is the common default, balancing compression ratio against generation time.

WOFF2: Brotli + Preprocessing

WOFF2 doesn't just use a better compression algorithm—it first transforms font data into a more compressible format, then applies Brotli compression.

# Converting TTF to WOFF2 with Python fonttools
from fontTools.ttLib import TTFont
from fontTools import ttLib
import brotli  # pip install brotli

# Using woff2 command-line tool (recommended)
# pip install brotli fonttools[woff]
python -m fonttools ttLib.woff2 compress myfont.ttf
# Output: myfont.woff2

# Size comparison
# myfont.ttf  = 245,890 bytes
# myfont.woff = 148,230 bytes (−40%)
# myfont.woff2 = 113,450 bytes (−54% from TTF, −23% from WOFF)

Practical Recommendations

/* Optimal @font-face declaration */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap;
}

/* Order matters: browsers use first supported format */
/* WOFF2 first → most browsers use it */
/* WOFF fallback → IE11 and very old browsers */

/* No need for TTF/OTF in @font-face anymore */
/* 97%+ support for WOFF2, 99%+ for WOFF */

Related Technical Guides