What are the key takeaways from this guide?

Web fonts have evolved from unreliable browser plugins to a robust ecosystem.. WOFF2 uses Brotli compression, achieving 30% better compression than WOFF.. A variable font contains an entire family — all weights, widths, and styles — in a single file.. Subset fonts to include only the characters your site uses.

Who is this guide for?

This guide is designed for beginner-level users and takes about 1 minutes to read.

Best Practice Beginner 1 min read 270 words

Font Format Guide: OTF, TTF, WOFF2, and Variable Fonts

Understand web font formats, when to use each, and how variable fonts reduce page weight. Covers self-hosting best practices, subsetting, and the font-display descriptor.

Key Takeaways

Web fonts have evolved from unreliable browser plugins to a robust ecosystem.
WOFF2 uses Brotli compression, achieving 30% better compression than WOFF.
A variable font contains an entire family — all weights, widths, and styles — in a single file.
Subset fonts to include only the characters your site uses

Featured Tool

Font Pairing Suggestions

Try it Free

Font Format Evolution

Web fonts have evolved from unreliable browser plugins to a robust ecosystem. WOFF2 compression and variable font technology have eliminated most performance concerns that once discouraged custom typography on the web.

Format Comparison

Format	Compression	Browser Support	Use Case
TTF	None	Universal	Desktop, legacy web
OTF	None	Universal	Desktop, advanced features
WOFF	zlib	98%+	Legacy web fallback
WOFF2	Brotli	97%+	Modern web standard
Variable	Per format	95%+	Multiple weights/styles in one file

WOFF2: The Web Standard

WOFF2 uses Brotli compression, achieving 30% better compression than WOFF. A typical 100KB TTF file compresses to approximately 40KB as WOFF2. Browser support exceeds 97%. There is virtually no reason to serve any other format to modern browsers.

Variable Fonts

A variable font contains an entire family — all weights, widths, and styles — in a single file. Instead of loading 6 separate files for Regular, Medium, SemiBold, Bold, and their italics, one variable font file handles everything. This typically reduces total font payload by 50-70%.

Self-Hosting Best Practices

Subset fonts to include only the characters your site uses
Use font-display: swap to prevent invisible text during loading
Preload your primary font with
Serve WOFF2 with proper Cache-Control: immutable headers
Host fonts on the same domain to avoid CORS preflight requests

Convert and subset fonts with Peasy's browser-based font tools.