What is a WOFF file?

WOFF (Web Open Font Format) is a font container format designed specifically for efficient web delivery. Developed collaboratively by Mozilla, Type Supply, and LettError, WOFF became a W3C Recommendation in 2012. It wraps existing TrueType (TTF) or OpenType (OTF) font data with zlib compression and adds a metadata block for licensing information, reducing font file sizes by approximately 30-40% compared to raw TTF/OTF files.

WOFF was created specifically to address the bandwidth cost of web fonts — beautiful typography is worthless if it slows page load. WOFF is universally supported in all modern browsers and remains widely used, though its successor WOFF2 achieves even better compression.

How to open WOFF files

• All modern web browsers — Natively rendered via CSS @font-face declarations
• FontForge (Windows, macOS, Linux) — Free, open-source font editor that reads and writes WOFF
• Transfonter (Web) — Online tool to convert between font formats
• FontDrop (Web) — Online font inspector and glyph viewer
• Glyphs (macOS) — Professional font design app

Technical specifications

Common use cases

• Custom web typography: Loading brand fonts (e.g., a company’s proprietary typeface) in browsers via @font-face
• Self-hosted web fonts: Hosting fonts on your own server instead of Google Fonts CDN for privacy compliance (GDPR)
• Fallback compatibility: Serving WOFF alongside WOFF2 to support older browsers
• Icon fonts: Libraries like Font Awesome distribute icons as WOFF/WOFF2 font files

Using WOFF in CSS

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

body {
  font-family: 'MyFont', system-ui, sans-serif;
}

The font-display: swap property shows a fallback system font immediately while the custom font loads, preventing invisible text during load (FOIT — Flash of Invisible Text). WOFF2 is listed first as the preferred format; WOFF is the fallback for older browsers.

WOFF vs WOFF2 vs TTF

For new projects: serve WOFF2 as primary with WOFF as fallback. TTF is only needed for very old browser support (IE8 and older) which is effectively obsolete.

Font loading performance

Web fonts are render-blocking for text — browsers won’t display text until the font file downloads (without font-display: swap). To minimize font loading impact:

1. Use WOFF2 (smallest file size)
2. Add font-display: swap to allow text rendering with fallback font
3. Preload critical fonts: <link rel="preload" href="/fonts/main.woff2" as="font" crossorigin>
4. Subset fonts to include only the characters you need (reduces file size dramatically for Latin-only sites using a large font)
5. Host fonts locally to avoid extra DNS lookups to Google Fonts or other CDNs