Web Open Font Format (WOFF) 1.0

Web Open Font Format (WOFF) is a compressed font container format developed specifically for web use. WOFF wraps existing TrueType or OpenType fonts in a standardized package optimized for web delivery, providing better compression than raw font files while preserving all original typographic capabilities.

Core Characteristics

WOFF is fundamentally a transport format rather than a new font technology:

• Container format: Wraps TTF or OTF fonts without modifying glyph data
• zlib compression: Compresses each font table individually for reduced file size
• Metadata support: Optional XML metadata for licensing and attribution
• Web-optimized: Designed specifically for @font-face delivery
• Browser decompression: Automatically inflated to TTF/OTF in memory

How WOFF Works

When a browser encounters a WOFF font, it performs the following steps:

1. Downloads the compressed .woff file
2. Validates the WOFF header and table directory
3. Decompresses each font table using zlib
4. Reconstructs the original sfnt font structure in memory
5. Uses the font exactly as if it were the original TTF/OTF

This means WOFF fonts have identical rendering, hinting, and OpenType feature support to their source fonts—the only difference is the compressed delivery mechanism.

Current Status

While WOFF achieved universal browser support and transformed web typography from 2010-2016, it has been largely superseded by WOFF2, which offers significantly better compression through Brotli encoding. Today, WOFF serves primarily as a fallback format for older browsers, with WOFF2 as the primary web font format.

The Web Open Font Format (WOFF) emerged from years of frustration with web typography limitations and represents a crucial stepping stone in the evolution of fonts on the web. Its story is one of industry collaboration, technical compromise, and the recognition that the web needed its own font delivery mechanism.

The Dark Ages of Web Typography (1996-2008)

For over a decade, web designers faced severe typography constraints that limited creative expression and brand consistency:

The CSS2 specification (1998) included @font-face, but without a standardized font format for the web, browsers implemented it inconsistently or not at all. The result was a fractured landscape where custom fonts were effectively impossible.

Early Web Font Attempts (1996-2008)

Several attempts to solve web typography preceded WOFF:

Each solution had fatal flaws: proprietary formats created vendor lock-in, raw font files raised piracy concerns, and workarounds like Flash text were slow and inaccessible. The industry needed a standard that balanced font foundry concerns with developer needs.

The @font-face Renaissance (2008-2009)

In 2008, Safari 3.1 began supporting @font-face with raw TrueType and OpenType fonts, followed by Firefox 3.5 in 2009. This watershed moment proved that web fonts were technically feasible, but several problems remained:

WOFF Development Begins (2009)

In April 2009, Mozilla's Jonathan Kew, Type Supply's Tal Leming, and FontFont's Erik van Blokland began developing WOFF as a pragmatic solution to web font delivery:

WOFF was explicitly designed as a "container" rather than a new font format. It wraps existing TTF or OTF fonts in a compressed envelope with metadata, making it clear these are web resources while preserving all the original font's typographic capabilities.

W3C Standardization (2009-2012)

The WOFF specification was submitted to the W3C WebFonts Working Group for standardization:

Browser Adoption and Market Impact (2010-2013)

WOFF's universal browser support created an explosion in web typography:

• Google Fonts (2010): Launched with WOFF as primary format, democratizing web fonts
• Typekit (acquired 2011): Web font service boom, Adobe acquires for $30M+
• Font foundries adapt: Major type foundries create web font licensing programs
• Design Renaissance: Websites finally achieve typographic parity with print
• @font-face ubiquitous: CSS font loading becomes standard practice

By 2013, WOFF support was effectively universal across modern browsers, achieving what no previous web font format had managed: cross-browser, cross-platform consistency without proprietary extensions.

Performance Limitations and WOFF2 Development (2013-2014)

Even as WOFF succeeded, performance concerns emerged:

Google's analysis of web font performance in 2013 showed that better compression could significantly improve page load times. This led to the development of WOFF2, which uses Brotli compression and preprocessing to achieve 30% better compression than WOFF.

WOFF2 Transition and WOFF's Decline (2014-Present)

WOFF2's superior compression and efficiency gradually displaced WOFF as the primary web font format:

Current Status and Best Practices (2025)

WOFF remains supported but is no longer recommended for modern development:

@font-face {
  font-family: 'WebFont';
  /* WOFF2 for modern browsers (90%+ compatibility) */
  src: url('font.woff2') format('woff2'),
       /* WOFF as fallback (legacy support) */
       url('font.woff') format('woff');
  font-display: swap; /* Improve perceived performance */
}

WOFF's Legacy and Lessons

WOFF's contribution to web typography cannot be overstated:

While WOFF may now serve primarily as a fallback format, its role in transforming web typography from a creative desert into a rich design medium cannot be overstated. Every beautiful typeface you see on the modern web stands on WOFF's shoulders.

Compression Method

WOFF employs zlib (DEFLATE) compression on a per-table basis:

• zlib/DEFLATE algorithm: Standard compression used in ZIP files and PNG images
• Per-table compression: Each OpenType table compressed independently
• Typical compression ratio: 40-50% reduction from original TTF/OTF size
• Decompression speed: Fast enough for real-time browser use

File Structure

WOFF Header Details

Metadata Block

WOFF supports optional XML metadata for licensing and attribution:

<?xml version="1.0" encoding="UTF-8"?>
<metadata version="1.0">
  <uniqueid id="com.example.fontvendor.myfont.v1.2.3"/>
  <vendor name="Font Vendor" url="https://example.com"/>
  <credits>
    <credit name="Designer Name" role="Designer"/>
  </credits>
  <description>
    <text lang="en">A beautiful web font</text>
  </description>
  <license url="https://example.com/license">
    <text lang="en">Licensed for web use only</text>
  </license>
</metadata>

Container Architecture

WOFF acts as a compressed container for sfnt-based fonts (TrueType and OpenType):

Preserved Font Tables

All original OpenType tables are preserved without modification:

• Required tables: cmap, glyf/CFF, head, hhea, hmtx, loca (TrueType), maxp, name, post
• Optional tables: GSUB, GPOS, kern, gasp, GDEF, etc.
• OpenType features: All ligatures, alternates, and layout features intact
• Hinting: TrueType hinting instructions preserved
• Kerning: Both kern table and GPOS kerning maintained

WOFF does not add or remove typographic features—it simply delivers the source font's capabilities to the browser. Whatever OpenType features exist in the original TTF or OTF font remain available.

OpenType Feature Support

If the source font includes OpenType features, they can be activated via CSS:

@font-face {
  font-family: 'MyWebFont';
  src: url('/fonts/MyWebFont.woff2') format('woff2'),
       url('/fonts/MyWebFont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Enable ligatures */
.text-with-ligatures {
  font-family: 'MyWebFont', sans-serif;
  font-feature-settings: 'liga' 1, 'dlig' 1;
}

/* Use old-style figures */
.text-with-oldstyle {
  font-variant-numeric: oldstyle-nums;
  /* Equivalent to: font-feature-settings: 'onum' 1; */
}

/* Small caps */
.small-caps {
  font-variant-caps: small-caps;
  /* Equivalent to: font-feature-settings: 'smcp' 1; */
}

/* Contextual alternates */
.fancy-text {
  font-feature-settings: 'calt' 1, 'salt' 1;
}

Variable Fonts in WOFF

WOFF can contain variable fonts with all their interpolation axes:

@font-face {
  font-family: 'MyVariableFont';
  src: url('font-variable.woff2') format('woff2'),
       url('font-variable.woff') format('woff');
  font-weight: 100 900; /* Weight range */
  font-stretch: 75% 125%; /* Width range */
}

h1 {
  font-family: 'MyVariableFont';
  font-weight: 750;
  font-variation-settings: 'wdth' 110, 'wght' 650;
}

Historical Usage (2010-2016)

During its peak, WOFF was the primary web font format:

• Self-hosted web fonts: Primary format for font hosting
• Web font services: Google Fonts, Typekit, Font Squirrel served WOFF
• Responsive web design: Enabled custom typography in fluid layouts
• Corporate branding: Companies could finally use brand fonts online
• Icon fonts: Font Awesome and similar icon fonts distributed as WOFF

Current Usage (2025)

WOFF now serves primarily as a compatibility fallback:

• Legacy browser support: Fallback for IE11 and older mobile browsers
• Graceful degradation: Secondary format after WOFF2
• Legacy infrastructure: Older webfont kits and CDNs
• Compatibility layers: Ensuring fonts work on maximum browsers

When to Use WOFF vs WOFF2

Understanding WOFF's position relative to other web font formats:

File Size Comparison

Real-world compression comparison using Roboto Regular:

For detailed comparisons, see our WOFF vs WOFF2 comparison or WOFF vs TTF comparison.

Creating WOFF Files

Convert TTF or OTF source fonts to WOFF using various tools:

# Using sfnt2woff
sfnt2woff MyFont.ttf

# Using fonttools (Python)
pyftsubset MyFont.ttf --output-file=MyFont.woff --flavor=woff

# Using woff2 tools (convert to WOFF2, then WOFF if needed)
woff2_compress MyFont.ttf
woff2_decompress MyFont.woff2 MyFont-temp.ttf
sfnt2woff MyFont-temp.ttf

# Batch conversion
for font in *.ttf; do
  sfnt2woff "$font"
done

Using WOFF in CSS

/* Optimal font loading strategy */
@font-face {
  font-family: 'CustomFont';
  /* WOFF2 for 97%+ of users (modern browsers) */
  src: url('/fonts/CustomFont.woff2') format('woff2'),
       /* WOFF fallback for IE11 and old mobile */
       url('/fonts/CustomFont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Show fallback text immediately */
}

/* Multiple weights example */
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/CustomFont-Bold.woff2') format('woff2'),
       url('/fonts/CustomFont-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

Font Loading Optimization

Improve perceived performance with proper font loading strategies:

<!-- In HTML <head> -->
<link rel="preload" 
      href="/fonts/CustomFont.woff2" 
      as="font" 
      type="font/woff2" 
      crossorigin>

<link rel="preload" 
      href="/fonts/CustomFont-Bold.woff2" 
      as="font" 
      type="font/woff2" 
      crossorigin>

<!-- CSS -->
<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('/fonts/CustomFont.woff2') format('woff2'),
         url('/fonts/CustomFont.woff') format('woff');
    font-display: swap;
  }
</style>

Subsetting WOFF Fonts

Reduce file size by including only needed glyphs:

# Latin characters only
pyftsubset MyFont.ttf \
  --unicodes="U+0020-007F,U+00A0-00FF" \
  --output-file=MyFont-Latin.woff \
  --flavor=woff

# Specific text content
pyftsubset MyFont.ttf \
  --text-file=content.txt \
  --output-file=MyFont-Subset.woff \
  --flavor=woff

# Keep OpenType features
pyftsubset MyFont.ttf \
  --unicodes="U+0020-007F" \
  --layout-features="*" \
  --output-file=MyFont-Features.woff \
  --flavor=woff

Converting WOFF to Other Formats

# WOFF to TTF (extract original font)
woff2sfnt MyFont.woff

# WOFF to WOFF2 (via TTF intermediate)
woff2sfnt MyFont.woff > MyFont-temp.ttf
woff2_compress MyFont-temp.ttf

# Using fonttools
ttx -f MyFont.woff  # Creates MyFont.ttx (XML)
ttx -f -o MyFont.ttf MyFont.ttx  # Convert back to TTF

For easy conversions without command-line tools, use our Font Converter Tool which supports batch processing and multiple output formats.