Web Open Font Format (WOFF2) 2.0

WOFF2 is the modern successor to WOFF 1.0. It packages an existing OpenType or TrueType font inside a web-optimized container and applies advanced compression to reduce transfer size. The underlying font remains an sfnt-based font; WOFF2 changes delivery efficiency, not typographic capability.

The main improvements over WOFF 1.0:

• Brotli compression instead of zlib
• Optional table transformations that compress outline data more effectively
• Better performance for large Unicode fonts and variable families
• Reduced bandwidth cost for web applications and design systems

WOFF2 is the second-generation Web Open Font Format designed to reduce the real-world cost of typography on the modern web. It was created to keep the OpenType/TrueType ecosystem intact while dramatically improving network efficiency for large families, multilingual UI fonts, and the rising use of variable fonts.

Before WOFF: The Early Web Font Problem

In the early era of web typography, authors either depended on system fonts or served raw TTF/OTF files. That approach had predictable problems: large downloads, inconsistent metadata handling, and weak alignment with browser security and licensing expectations.

• Raw TTF/OTF delivery was bulky and not purpose-built for the browser
• Font licensing models were uneasy about uncontrolled distribution
• Performance penalties increased sharply as designers adopted multi-weight families
• Global products needed large Unicode coverage, multiplying payload size

WOFF 1.0: The First Web Standardization

WOFF 1.0 stabilized the situation by defining a browser-oriented wrapper around sfnt fonts. It offered a standard header and directory model, optional metadata blocks, and compression with widely supported tooling. This gave the industry a shared, reliable baseline for distributing fonts on the web.

The Pressure That Exposed WOFF 1.0 Limits

As web applications became heavier and more global, WOFF 1.0 began to show its ceiling. The shift to mobile-first products, larger UI typography systems, and multi-script design pushed zlib-based compression to a point where meaningful gains required a new strategy.

• Large Unicode fonts for global products significantly increased transfer size
• Design systems normalized multiple weights and styles as default baselines
• Performance budgets tightened due to mobile networks and low-power devices
• Early variable font adoption highlighted the need for better compression efficiency

The WOFF2 Approach

WOFF2 was built as an evolution, not a replacement of the underlying font model. The crucial change is the combination of Brotli compression with table transforms applied to known OpenType/TrueType structures before compression. Instead of compressing tables as-is, WOFF2 can normalize and reorganize outline and metric data to create more redundancy, which Brotli exploits effectively.

Milestones and Adoption Arc

The WOFF2 specification matured through the mid-2010s alongside improvements in browser font pipelines. Once modern engines aligned on Brotli support and transform handling, WOFF2 became the default target in production webfont workflows.

What WOFF2 Did Not Change

WOFF2 does not redefine typography. It does not create new shaping rules, new OpenType features, or new layout behavior. It is a transport and packaging improvement layered on top of the same sfnt model used by OpenType and TrueType sources.

• Ligatures, alternates, kerning, and complex scripts behave the same as in the source font
• Color and variable tables remain intact
• Authoring and licensing still originate from the OTF/TTF masters

Lessons from WOFF2's Evolution

• Web standards follow performance pressure: the format exists because the network cost became a product-level bottleneck
• Backward-compatible evolution wins: WOFF2 improved delivery without fragmenting the font ecosystem
• Compression alone isn't enough: domain-aware transforms enabled the real leap forward

In practical terms, WOFF2 is now the default endpoint for browser delivery. WOFF remains relevant as a compatibility fallback, while OTF/TTF remain the authoritative sources for design, licensing, and authoring.

Core Properties

• Internal format: TrueType or OpenType sfnt
• Compression: Brotli over a transformed font data stream
• Feature preservation: GSUB/GPOS and all OpenType tables remain available
• Metadata: Optional blocks for descriptive and private data
• Goal: Smaller files and faster downloads with no loss of rendering data

Why WOFF2 Is Smaller

WOFF2 compresses more aggressively by reorganizing certain table data before compression. This is especially effective for TrueType outline tables and large glyph sets.

WOFF2 keeps a compact header and directory concept similar to WOFF 1.0, but the font data is stored as a single compressed stream with optional transforms applied to specific known tables.

After decompression and reverse-transform steps, the browser reconstructs an in-memory sfnt font equivalent to the original TTF or OTF source.

WOFF2 improves compression by applying optional transforms to known table types before Brotli compression. These transforms normalize and reorder data to improve redundancy.

Common Transform Targets

• glyf/loca: TrueType outlines re-encoded for better compression
• hmtx: Horizontal metrics optimization
• other known tables: Normalized encoding improves cross-glyph pattern matching

WOFF2 preserves all typographic features from the source font. Ligatures, alternates, kerning, complex scripts, color tables, and variable axes work the same way as with the original OpenType or TrueType font.

Recommended @font-face Stack

@font-face {
  font-family: 'BrandSans';
  src: url('/fonts/BrandSans.woff2') format('woff2'),
       url('/fonts/BrandSans.woff') format('woff');
  font-weight: 100 900; /* supports variable axis if present */
  font-style: normal;
  font-display: swap;
}

:root {
  font-family: 'BrandSans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

OpenType Feature Control

/* Works identically for WOFF2-served fonts */
.body-text {
  font-feature-settings: 'liga' 1, 'kern' 1, 'calt' 1;
}

.small-caps {
  font-variant-caps: small-caps;
}

.numerals {
  font-variant-numeric: oldstyle-nums tabular-nums;
}

If the font is variable, axis control uses the same CSS syntax as any other OpenType variable font.

Primary Webfont Format

• Default choice for modern websites and web apps
• Best format for variable fonts on the web
• Efficient for large multilingual UI fonts
• Ideal for self-hosting with long-term caching

Performance Patterns

• Serve WOFF2 first, WOFF second
• Subset by script or product area
• Use unicode-range for selective loading
• Preload critical UI fonts

@font-face {
  font-family: 'GlobalUI';
  src: url('/fonts/GlobalUI-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC;
  font-display: swap;
}

@font-face {
  font-family: 'GlobalUI';
  src: url('/fonts/GlobalUI-devanagari.woff2') format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CFF;
  font-display: swap;
}

WOFF2 is the correct endpoint for web delivery. OTF/TTF remain the correct sources for authoring and distribution outside the browser.

Generating WOFF2

WOFF2 files are generated from OpenType or TrueType sources. Common CLI flows:

# Basic WOFF2 generation
woff2_compress MyFont.ttf
woff2_compress MyFont.otf

# Generate a WOFF fallback from the same source (tool-specific)
sfnt2woff MyFont.ttf

# Subset directly to WOFF2
pyftsubset MyFont.ttf \
  --flavor=woff2 \
  --layout-features+=liga,kern,calt \
  --unicodes="U+0000-00FF" \
  --output-file="MyFont-latin.woff2"

Deployment Checklist

• Confirm webfont rights in the license
• Convert from a clean, up-to-date OTF/TTF master
• Subset per script and product needs
• Serve WOFF2 with a WOFF fallback when required
• Set long cache headers and versioned file names
• Use preload for critical UI fonts

For GUI workflows, use Font Converter Tool and a subsetting utility to produce paired WOFF2/WOFF bundles from a single source.