Complete Guide to Font Formats
Master all font formats with comprehensive explanations of TTF, OTF, WOFF, WOFF2, and EOT including technical specifications and use cases
In Simple Terms
For web: Use WOFF2 (smallest, 97% browser support) with WOFF fallback. Never use TTF/OTF directly on websites—they're 2-3x larger.For desktop: Use OTF for advanced typography features (ligatures, alternates) or TTF for maximum compatibility. Both work in all design apps.Skip these formats: EOT (IE only, obsolete), SVG fonts (deprecated), and raw PFB/Type1 (no longer supported). Focus on WOFF2 + OTF/TTF.
In this article
Font formats are the container technologies that define how typeface data is stored, compressed, and rendered across different platforms and applications. Understanding font formats is essential for web developers, designers, and anyone working with digital typography, as the format you choose directly impacts file size, browser compatibility, rendering quality, and licensing protection.
The evolution of font formats mirrors the evolution of digital typography itself. From the early TrueType fonts of the 1980s designed for desktop operating systems, through OpenType's advanced typography features in the 1990s, to the web-optimized WOFF and WOFF2 formats of the 2010s, each format represents a technological advancement addressing specific limitations of its predecessors. Today's web developer needs to understand at least five major formats: TTF, OTF, WOFF, WOFF2, and EOT.
This comprehensive guide examines each major font format in detail, covering technical specifications, compression mechanisms, browser support, typical file sizes, licensing considerations, and practical use cases. You'll learn when to use each format, how they compare to each other, and how to implement them effectively in both web and desktop environments. Whether you're optimizing a website for performance, developing a desktop application, or managing a professional font library, this guide provides the knowledge you need to make informed decisions.
Understanding the Font Format Landscape
Historical Evolution
1980s - TrueType (TTF)
Apple and Microsoft develop TrueType as an alternative to Adobe's Type 1 PostScript fonts. Offers precise outline control with quadratic Bézier curves and sophisticated hinting for screen display.
1996 - OpenType (OTF)
Microsoft and Adobe collaborate to create OpenType, extending TrueType with PostScript font data, advanced typography features (ligatures, contextual alternates), and comprehensive Unicode support.
2009 - WOFF
W3C introduces Web Open Font Format, wrapping TTF/OTF fonts with compression and metadata specifically for web use. Addresses licensing concerns and reduces bandwidth requirements.
2014 - WOFF2
Second generation WOFF using Brotli compression achieves 30% better compression than WOFF. Becomes the recommended format for modern web typography.
Format Categories
Desktop Formats:
- • TTF - Universal desktop compatibility
- • OTF - Advanced typography features
- • Use: Operating systems, design software
- • Characteristics: Uncompressed, full feature set
Web Formats:
- • WOFF - Web standard, compressed
- • WOFF2 - Modern web, best compression
- • EOT - Legacy IE support only
- • Characteristics: Compressed, web-optimized
Quick Reference Table
| Format | Extension | Primary Use | Compression |
|---|---|---|---|
| TrueType | .ttf | Desktop | None |
| OpenType | .otf | Desktop/Print | None |
| WOFF | .woff | Web | Gzip (50%) |
| WOFF2 | .woff2 | Modern Web | Brotli (68%) |
| EOT | .eot | IE Legacy | LZ (40%) |
TTF (TrueType Font)
Technical Specifications
- Developed: 1980s by Apple, later co-developed with Microsoft
- File Extension: .ttf
- MIME Type: font/ttf or application/x-font-ttf
- Structure: SFNT (Spline Font) container with binary tables
- Outline Format: Quadratic Bézier curves
- Hinting: TrueType instructions for grid-fitting
- Compression: None (uncompressed font data)
- Typical Size: 150-250 KB for Latin fonts with full character set
Key Features
Advantages:
- • Universal desktop OS support (Windows, macOS, Linux)
- • Simple, well-documented format
- • Excellent hinting for low-resolution displays
- • Supported by all design applications
- • Easy to edit and modify
- • No licensing restrictions built-in
- • Mature, stable technology
Disadvantages:
- • Large file sizes (no compression)
- • Limited advanced typography features
- • Not optimized for web use
- • No built-in metadata support
- • Easier to illegally distribute
- • Less efficient than OTF for complex fonts
Best Use Cases
- Desktop Applications: Native Windows, macOS, and Linux applications
- Design Software: Adobe Creative Suite, Sketch, Figma desktop versions
- Operating System Fonts: System-wide font installation
- Print Production: PDF embedding and professional printing workflows
- Mobile Apps: iOS and Android native application development
- Font Development: Source format for creating web-optimized versions
- Font Distribution: Selling or distributing fonts to end users
Browser Support for TTF
While TTF is supported by modern browsers, it's not recommended for web use:
- • Chrome 4+ (2010)
- • Firefox 3.5+ (2009)
- • Safari 3.1+ (2008)
- • IE 9+ (2011)
- • Edge: All versions
- • Recommendation: Use WOFF2/WOFF instead for web due to file size
OTF (OpenType Font)
Technical Specifications
- Developed: 1996 by Microsoft and Adobe
- File Extension: .otf (PostScript outlines) or .ttf (TrueType outlines)
- MIME Type: font/otf or application/vnd.ms-opentype
- Structure: SFNT container with extended tables for features
- Outline Format: PostScript CFF (Compact Font Format) or TrueType
- Advanced Features: GSUB/GPOS tables for typography
- Unicode Support: Comprehensive (65,000+ glyphs possible)
- Typical Size: 100-400 KB depending on features and glyph count
Advanced Typography Features
OpenType Features (Examples):
- • Ligatures: fi, fl, ffi automatic replacement
- • Contextual Alternates: Characters change based on neighbors
- • Stylistic Sets: Alternative glyph designs
- • Small Caps: True small capital letters
- • Oldstyle Figures: Numbers with ascenders/descenders
- • Swashes: Decorative character variants
- • Fractions: Automatic fraction formatting
- • Kerning: Advanced pair and contextual kerning
Multi-Language Support:
- • Single font file for multiple scripts (Latin, Cyrillic, Greek, etc.)
- • Complex script support (Arabic, Hebrew, Devanagari)
- • Right-to-left text support
- • Combining marks and diacritics
- • Language-specific glyph variants
OTF vs TTF
| Feature | TTF | OTF |
|---|---|---|
| Outline Format | Quadratic Bézier | Cubic Bézier (CFF) |
| Glyph Limit | ~65,000 | 65,000+ |
| Typography Features | Basic | Advanced (GSUB/GPOS) |
| File Size | Larger | Smaller (CFF compression) |
| Print Quality | Good | Better (PostScript) |
| Desktop Support | Universal | Universal (modern OS) |
Best Use Cases
- Professional Typography: Books, magazines, high-end design work
- Print Production: Commercial printing, packaging, branding
- Multi-Language Publishing: International documents, localization
- Complex Scripts: Arabic, Hebrew, Indic languages
- Advanced Layouts: When ligatures, alternates, and features matter
- Font Design: Creating professional, feature-rich typefaces
- Adobe Applications: InDesign, Illustrator professional workflows
WOFF (Web Open Font Format)
Technical Specifications
- Developed: 2009 by Mozilla, Opera, Microsoft (W3C Recommendation 2012)
- File Extension: .woff
- MIME Type: font/woff
- Structure: Compressed TTF/OTF with WOFF header and metadata
- Compression: Gzip (zlib) compression per table
- Compression Ratio: 40-50% smaller than TTF/OTF
- Metadata Support: Extended metadata block for licensing, vendor info
- Typical Size: 80-120 KB for standard Latin fonts
Web-Specific Features
Built-in Protection:
- • Same-origin policy enforcement (CORS headers required)
- • Metadata block for licensing information
- • Private data block for vendor-specific information
- • Checksum verification for file integrity
- • More difficult to extract original font
Performance Benefits:
- • 40-50% smaller file size = faster downloads
- • Reduced bandwidth costs
- • Improved Core Web Vitals scores
- • Better mobile performance
- • Decompression overhead negligible (5-15ms)
Browser Support
Excellent browser support (99%+ globally):
- • Chrome 5+ (2010)
- • Firefox 3.6+ (2010)
- • Safari 5.1+ (2011)
- • IE 9+ (2011)
- • Edge: All versions
- • Opera 11.1+ (2011)
- • iOS Safari 5.0+ (2011)
- • Android Browser 4.4+ (2013)
Implementation Example
@font-face {
font-family: 'MyFont';
src: url('myfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Usage */
body {
font-family: 'MyFont', Arial, sans-serif;
}WOFF2 (Web Open Font Format 2)
Technical Specifications
- Developed: 2014 (W3C Recommendation 2018)
- File Extension: .woff2
- MIME Type: font/woff2
- Compression: Brotli compression algorithm
- Compression Ratio: 30% better than WOFF, 68% smaller than TTF
- Preprocessing: Table transformations before compression
- Typical Size: 50-70 KB for standard Latin fonts
- Status: Recommended format for modern web (2025)
Improvements Over WOFF
Compression Improvements:
- • Brotli compression (vs gzip in WOFF)
- • Table preprocessing reduces redundancy
- • Glyph outline transformation optimization
- • Better compression of common patterns
- • 30% average size reduction vs WOFF
Real-World Size Comparison:
| Font | TTF | WOFF | WOFF2 |
|---|---|---|---|
| Roboto Regular | 168 KB | 85 KB | 53 KB |
| Open Sans | 224 KB | 115 KB | 71 KB |
Browser Support
Excellent modern browser support (97%+ globally):
- • Chrome 36+ (July 2014)
- • Firefox 39+ (July 2015)
- • Safari 12+ (September 2018) - Note: Safari was late adopter
- • Edge 14+ (August 2016)
- • Opera 23+ (July 2014)
- • iOS Safari 10+ (2016)
- • Android Browser 5.0+ (2014)
- • Not supported: IE11 and older
Recommended Implementation (2025)
@font-face {
font-family: 'MyFont';
/* WOFF2 first - 97%+ browsers, smallest size */
src: url('myfont.woff2') format('woff2'),
/* WOFF fallback - IE11 and old Safari */
url('myfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* TTF fallback no longer necessary in 2025 */Note: This two-format approach provides 99%+ browser coverage while maintaining optimal performance.
EOT (Embedded OpenType)
Technical Specifications
- Developed: 1997 by Microsoft
- File Extension: .eot
- MIME Type: application/vnd.ms-fontobject
- Compression: LZ compression (MicroType Express)
- Compression Ratio: 35-45% smaller than TTF
- Browser Support: Internet Explorer 6-11 ONLY
- Status: Legacy format, deprecated for modern use
Historical Context
EOT was Microsoft's proprietary solution for web fonts before WOFF existed. It was the only way to use custom fonts in Internet Explorer 6-8 (2001-2011 era). Features included:
- • Domain binding (fonts locked to specific URLs)
- • Root string verification
- • Encryption for DRM
- • Subsetting support
- • Font embedding permission bits
Should You Use EOT in 2025?
Recommendation: NO
- IE11 market share: Under 0.5% globally (December 2025)
- Microsoft ended support: IE11 officially retired June 2022
- WOFF support: Even IE9+ supports WOFF (released 2011)
- Development overhead: Not worth maintaining EOT files
- Modern approach: Use WOFF2 + WOFF for 99%+ coverage
Legacy Implementation (Historical Reference)
If you absolutely must support IE8 and older (not recommended):
@font-face {
font-family: 'MyFont';
src: url('myfont.eot'); /* IE6-IE8 */
src: url('myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE9 Compat */
url('myfont.woff2') format('woff2'), /* Modern */
url('myfont.woff') format('woff'); /* IE9+, All modern */
}Reality: Skip EOT entirely in 2025. Focus development time on modern browsers.
Format Comparison and Selection
Comprehensive Comparison Table
| Feature | TTF | OTF | WOFF | WOFF2 | EOT |
|---|---|---|---|---|---|
| Size (168KB base) | 168 KB | 160 KB | 85 KB | 53 KB | 95 KB |
| Compression | None | CFF | Gzip | Brotli | LZ |
| Browser Support | 99%+ | 99%+ | 99%+ | 97%+ | <1% |
| Desktop Use | ✓ Best | ✓ Best | Limited | Limited | ✗ No |
| Web Use | Not ideal | Not ideal | ✓ Good | ✓ Best | ✗ Legacy |
| OT Features | Basic | ✓ Full | ✓ Full | ✓ Full | Limited |
| Metadata | Basic | Extended | ✓ Full | ✓ Full | Limited |
| 2025 Status | Desktop std | Desktop std | Web fallback | Web primary | Deprecated |
Decision Matrix: Which Format to Use
For Web Projects (2025):
- Primary: WOFF2 (97%+ browsers, smallest files)
- Fallback: WOFF (IE11, old Safari coverage)
- Skip: TTF, OTF, EOT (not needed)
- Result: 99%+ browser coverage, optimal performance
For Desktop Applications:
- Simple fonts: TTF (universal compatibility)
- Advanced typography: OTF (ligatures, alternates, features)
- Cross-platform: Provide both TTF and OTF
- Professional work: OTF preferred
For Font Distribution:
- Package includes: TTF + OTF for desktop use
- Web license: Separate WOFF2 + WOFF files
- Documentation: Specify which format for which use
Practical Implementation Guide
Modern Web Font Stack (2025 Best Practice)
/* Single font weight example */
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont-regular.woff2') format('woff2'),
url('/fonts/myfont-regular.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Multiple weights */
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont-bold.woff2') format('woff2'),
url('/fonts/myfont-bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Usage with fallback stack */
body {
font-family: 'MyFont', -apple-system, BlinkMacSystemFont,
'Segoe UI', Arial, sans-serif;
}Key points: WOFF2 first (smaller), WOFF fallback (IE11), font-display: swap (prevent FOIT), system font fallback stack.
Font Format Conversion
TTF/OTF to WOFF2:
# Using woff2 command line woff2_compress font.ttf # Output: font.woff2 # Using FontTools (Python) pip install fonttools brotli fonttools ttLib.woff2 compress font.ttf
Batch Conversion Script:
#!/bin/bash # Convert all TTF files to WOFF2 and WOFF for font in *.ttf; do # Create WOFF2 woff2_compress "$font" # Create WOFF fonttools ttLib.woff2 compress --flavor woff "$font" echo "Converted: $font" done
Online Conversion:
- • font-converters.com - Multiple format support
- • CloudConvert - Batch processing
- • FontSquirrel Webfont Generator - Includes subsetting
Performance Optimization Checklist
- ☐ Convert fonts to WOFF2 + WOFF
- ☐ Remove unused font weights and styles
- ☐ Subset fonts to required characters
- ☐ Self-host fonts (don't use Google Fonts CDN)
- ☐ Preload critical fonts in HTML head
- ☐ Use font-display: swap or optional
- ☐ Set cache headers (1 year max-age)
- ☐ Combine multiple weights into variable font if possible
- ☐ Test in Chrome DevTools Network tab
- ☐ Verify Core Web Vitals scores
Variable Fonts (Modern Alternative)
Variable fonts combine multiple weights/styles in one file:
- • Single file replaces 4-8 static font files
- • Support weight range (e.g., 100-900)
- • Can include width, slant, optical size axes
- • Browser support: 95%+ (all modern browsers)
- • Typical size: 80-120 KB (replaces 300-600 KB of static fonts)
Variable Font Example:
@font-face {
font-family: 'MyVariableFont';
src: url('font-variable.woff2') format('woff2-variations');
font-weight: 100 900; /* Supports full range */
font-style: oblique 0deg 12deg;
}
/* Use any weight */
.light { font-weight: 300; }
.regular { font-weight: 400; }
.bold { font-weight: 700; }
.heavy { font-weight: 900; }Summary: Choosing the Right Font Format
Font format selection depends on your deployment target: use WOFF2 and WOFF for web projects achieving 99%+ browser coverage with optimal file sizes, TTF and OTF for desktop applications and font distribution with TTF for broad compatibility and OTF for advanced typography features, and skip EOT entirely as it's deprecated with under 0.5% market share.
Modern web development in 2025 standardizes on WOFF2 as primary format with WOFF fallback, achieving 68% file size reduction compared to TTF while maintaining identical rendering quality. This two-format approach balances performance, browser support, and developer convenience. For desktop use, choose OTF when you need advanced typography features like ligatures and contextual alternates, otherwise TTF provides universal compatibility with simpler font structure.
Written & Verified by
Sarah Mitchell
Product Designer, Font Specialist