Web Font Formats: TTF, OTF, WOFF, and WOFF2 Explained - Colin Mackay

A developer-focused guide to web font file formats: when to use TTF, OTF, WOFF, or WOFF2, and how browsers handle them.

Last updated: 27 April 2026

Web Font Formats at a Glance

Web fonts allow websites to use typefaces beyond the system fonts installed on a visitor's device. Four file formats are relevant: TTF, OTF, WOFF, and WOFF2. Each represents a different point in the evolution from desktop fonts to web-optimised delivery.

TTF: TrueType Font

TrueType was developed by Apple and Microsoft in the late 1980s as an alternative to Adobe's PostScript fonts. TTF files contain both the font outlines and hinting instructions for screen rendering.

Characteristics

  • Quadratic Bézier curves for outlines
  • Universal OS support (Windows, macOS, Linux)
  • Relatively large file sizes — no built-in web compression
  • Supported in all browsers but not recommended for web use due to file size

OTF: OpenType Font

OpenType was jointly developed by Microsoft and Adobe. OTF files can contain either TrueType or PostScript (CFF) outlines, along with advanced typographic features like ligatures, small caps, and contextual alternates.

Characteristics

  • Supports both quadratic (TrueType) and cubic (PostScript/CFF) Bézier curves
  • Advanced layout features (OpenType features): ligatures, stylistic alternates, kerning tables
  • Universal desktop OS support
  • Like TTF, files are uncompressed and not ideal for web delivery

WOFF: Web Open Font Format

WOFF was created specifically for web use. It wraps TTF or OTF font data in a compressed container with additional metadata. Compression is table-level using zlib (Deflate), typically reducing file size by 40 % compared to the equivalent TTF or OTF.

Characteristics

  • Compressed wrapper around TTF/OTF data
  • ~40 % smaller than uncompressed TTF/OTF
  • W3C recommendation (standardised in 2012)
  • Universal browser support
  • Includes metadata fields for licensing information

WOFF2: The Production Standard

WOFF2 uses Brotli compression instead of Deflate, achieving significantly better compression. It is the format you should use for web fonts in production.

Characteristics

  • Brotli compression — typically 30 % smaller than WOFF, 50–60 % smaller than TTF/OTF
  • Supported in all modern browsers (Chrome 36+, Firefox 39+, Safari 12+, Edge 14+)
  • W3C recommendation (standardised in 2018)
  • Additional pre-processing of font data before compression for even better ratios

Format Comparison

Feature TTF OTF WOFF WOFF2
Primary useDesktopDesktopWebWeb
CompressionNoneNoneDeflate (~40 %)Brotli (~60 %)
Browser supportUniversalUniversalUniversal~97 %
Advanced typographyBasicFullInheritedInherited
Recommended for webNoNoFallback onlyYes

Implementing Web Fonts

A robust @font-face declaration serves WOFF2 with a WOFF fallback:

@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;
}

Key practices:

  • List WOFF2 first — browsers use the first format they support
  • Include WOFF as a fallback for the ~3 % of browsers without WOFF2 support
  • Use font-display: swap to show fallback text immediately while the font loads
  • Subset fonts to include only the character ranges you need (Latin, extended Latin, etc.)
  • Self-host when possible for performance — avoids DNS lookups and third-party dependencies

Font Subsetting

Most fonts include thousands of glyphs for multiple languages. If your site only uses Latin characters, subsetting can reduce a 200 KB font to 20 KB.

Tools for subsetting:

  • pyftsubset (part of fonttools): pyftsubset font.ttf --output-file=font-subset.woff2 --flavor=woff2 --unicodes="U+0000-00FF"
  • glyphhanger: Crawls your website and creates a subset containing only the characters actually used
  • Google Fonts: Automatically serves subsetted versions based on the text parameter

Performance Tips

  • Preload critical fonts: <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
  • Limit the number of font weights and styles — each variant is a separate file
  • Use variable fonts where possible — a single file replaces multiple weight/style variants
  • Set long cache headers for font files (they rarely change)

Frequently Asked Questions

Do I still need TTF or OTF for web?

No. WOFF2 with a WOFF fallback covers all modern browsers. TTF/OTF are only needed for desktop application use.

What about EOT (Embedded OpenType)?

EOT was an Internet Explorer-only format. IE is no longer supported. There is no reason to include EOT files in new projects.

Should I use Google Fonts or self-host?

Self-hosting is generally better for performance (fewer DNS lookups, more caching control) and privacy (no third-party requests). Google Fonts is convenient for prototyping. Use google-webfonts-helper to easily download and self-host Google Fonts.