Font File Formats
A comprehensive guide to OTF, TTF, WOFF2, and other font formats—what they are, how they work, and when to use each.
Overview
Modern fonts come in several formats, each designed for specific use cases. Understanding these formats helps you manage your font library effectively and choose the right format for each project.
Quick recommendation: For desktop work, use OTF or TTF. For the web, convert to WOFF2 for the best compression and browser support. NeedFont handles these conversions automatically.
Format Comparison
| Format | Extension | Outlines | Web Use | Variable | Best For |
|---|---|---|---|---|---|
| OTF | .otf | CFF (PostScript) | Desktop publishing, print design | ||
| TTF | .ttf | TrueType (glyf) | Desktop apps, legacy systems | ||
| WOFF | .woff | Either | Web (legacy browser support) | ||
| WOFF2 | .woff2 | Either | Modern web (recommended) |
OpenType & TrueType
OpenType fonts with CFF (PostScript) outlines. These use cubic Bézier curves, offering smooth curves with fewer control points. Preferred by many type designers and print professionals.
- Excellent for print and high-quality output
- Smaller file sizes for complex glyphs
- Full OpenType feature support
Fonts with TrueType (glyf) outlines. These use quadratic Bézier curves. Originally developed by Apple in 1991 as an alternative to PostScript, now widely supported everywhere.
- Universal compatibility across systems
- Excellent screen rendering (with hinting)
- Full OpenType feature support
A note on “OpenType” vs “TrueType”
Despite the names, both .otf and .ttf files are technically “OpenType” fonts—they share the same container format (SFNT) and feature support. The distinction is the outline type: CFF/PostScript curves (.otf) vs. TrueType curves (.ttf). Don't trust file extensions blindly; NeedFont reads the actual tables to determine the outline type.
Inside a Font File (SFNT)
Modern fonts are SFNT (spline font) containers—essentially a collection of tables, each serving a specific purpose. Understanding this structure helps explain how font software extracts metadata and renders glyphs.
Web Fonts: WOFF & WOFF2
Web fonts are compressed versions of OpenType fonts, optimized for transmission over the internet. They wrap the same SFNT tables in a more efficient container with built-in compression.
Web Open Font Format (2009). Uses zlib compression, achieving ~40% size reduction. Supported by all browsers, but superseded by WOFF2.
Web Open Font Format 2 (2014). Uses Brotli compression, achieving ~30% better compression than WOFF. The modern standard for web fonts.
Typical File Sizes
Variable Fonts
Variable fonts (OpenType 1.8, 2016) are a revolutionary technology that packs an entire type family into a single file. Instead of separate files for Regular, Bold, Italic, etc., a variable font contains a continuous design space across multiple axes.
Common Axes
wghtWeightwdthWidthslntSlantitalItalicopszOptical SizeGRADGradeBenefits
- Smaller total size: One variable font is often smaller than 2–3 static fonts
- Infinite styles: Access any weight, width, or other axis value
- Responsive design: Animate between styles or adapt to viewport
- Fewer HTTP requests: One file instead of many
Considerations
- Larger than a single static instance if you only need one weight
- Not all apps support variable fonts (legacy software)
- Subsetting variable fonts is more complex
/* CSS for variable fonts */
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/Inter.woff2') format('woff2-variations');
font-weight: 100 900; /* range, not single value */
font-stretch: 75% 125%;
}
body {
font-family: 'Inter Variable', sans-serif;
font-weight: 450; /* any value in range */
}Font Collections (TTC/OTC)
TrueType Collections (.ttc) and OpenType Collections (.otc) bundle multiple fonts into a single file. They're commonly used for fonts that share glyphs across styles (e.g., different languages or optical sizes of the same design).
How Collections Work
- • A collection contains multiple “fonts” (table sets) that can share tables
- • Common tables like `name` and `cmap` can be shared to reduce size
- • Each font in the collection is accessed by index (0, 1, 2…)
- • NeedFont parses collections and creates individual face records for each
Legacy Formats
While not recommended for new projects, you may encounter these older formats in existing libraries.
Type 1 (.pfb, .pfa)
Adobe's original PostScript font format (1984). Requires separate files for metrics (.afm, .pfm). Largely obsolete but still found in print archives.
Mac Suitcase / dfont
Classic Mac OS resource forks containing fonts. macOS can still read these, but they're rarely used today.
EOT (.eot)
Embedded OpenType, a Microsoft format for IE. Obsolete since IE's decline. Don't bother with this format.
SVG fonts
Fonts defined as SVG paths. Once used for iOS, now deprecated. Distinct from SVG-in-OpenType color fonts.
Choosing the Right Format
For desktop use
Use OTF or TTF. Both work everywhere. OTF may be slightly better for print; TTF for screen. Variable fonts work in modern apps (Adobe CC 2018+, Figma, Sketch).
For the web
Use WOFF2 as your primary format. For legacy browser support (IE11, older Safari), include WOFF as a fallback. Don't bother with EOT or SVG fonts.
For archiving
Keep the original format you received. Don't convert unnecessarily—conversions can lose data. NeedFont preserves originals and creates conversions as needed.