Which Font Format Should You Use? Complete Guide 2025
Comprehensive guide to choosing the right web font format for your project. Learn when to use WOFF2, WOFF, TTF, OTF, EOT, or SVG based on browser support, file size, and performance requirements.
In Simple Terms
Use WOFF2 for modern websites (98%+ browser support, smallest file size). Add WOFF as fallback only if supporting pre-2016 browsers.Use TTF/OTF for desktop applications, email templates, and print—never for web (2-3x larger than WOFF2).Skip EOT (IE only, obsolete) and SVG fonts (deprecated). Always use font-display: swap to prevent invisible text.
In this article
Choosing the correct font format is critical for web performance, browser compatibility, and user experience. With multiple font formats available—WOFF2, WOFF, TTF, OTF, EOT, and SVG—each serving different purposes and offering varying levels of compression, feature support, and browser compatibility, selecting the right format can significantly impact your website's loading speed, visual quality, and cross-browser functionality. The wrong choice can result in bloated file sizes that slow page loads, fonts failing to render in older browsers, missing typographic features, or accessibility issues that affect users with disabilities.
Modern web development has largely standardized around WOFF2 as the primary font format due to its superior compression ratio (30-50% smaller than WOFF, 70-80% smaller than TTF), universal support in modern browsers (Chrome 36+, Firefox 39+, Safari 10+, Edge 14+), and full OpenType feature support including ligatures, kerning, and advanced typography. However, legacy browser support, specific platform requirements, email template compatibility, desktop application distribution, and special use cases may require fallback formats like WOFF for older browsers, TTF/OTF for desktop applications and email clients, or even EOT for Internet Explorer 8 and below. Understanding when and why to use each format ensures your fonts work everywhere while maintaining optimal performance.
The font format landscape has evolved dramatically over the past decade. In 2010, web developers needed to serve fonts in five different formats (EOT, WOFF, TTF, OTF, SVG) to ensure cross-browser compatibility, resulting in complex @font-face declarations and significant bandwidth overhead. By 2025, the situation has simplified considerably—WOFF2 alone covers 98%+ of global browser traffic, with WOFF as a fallback handling the remaining legacy users. This consolidation has made font implementation simpler, faster, and more reliable, though understanding the full format ecosystem remains important for edge cases, legacy support requirements, and specialized applications beyond web browsers.
This comprehensive guide explains every web font format in detail, comparing their compression efficiency, browser support timelines, OpenType feature capabilities, and ideal use cases. You'll learn which format to use for modern websites prioritizing performance, how to implement proper fallback stacks for maximum compatibility, when to use uncompressed formats like TTF/OTF for desktop or email distribution, how to optimize @font-face declarations for the best loading performance, and best practices for format selection based on your specific project requirements. Whether you're building a cutting-edge web application, maintaining a legacy system, or distributing fonts for desktop use, this guide provides clear, actionable recommendations.
Understanding Font Formats
The Six Main Font Formats
1. WOFF2 (Web Open Font Format 2)
Released: 2014 | File Extension: .woff2 | MIME Type: font/woff2
The modern standard for web fonts. Uses Brotli compression for superior file size reduction (30-50% smaller than WOFF). Supported by all modern browsers. Best choice for web in 2025.
2. WOFF (Web Open Font Format)
Released: 2009 | File Extension: .woff | MIME Type: font/woff
The original web font format. Uses gzip compression. Excellent browser support including older versions. Ideal fallback for WOFF2 when supporting legacy browsers.
3. TTF (TrueType Font)
Released: 1991 | File Extension: .ttf | MIME Type: font/ttf
Classic desktop font format developed by Apple and Microsoft. No compression, larger file sizes. Widely supported but not optimized for web. Best for desktop applications and email.
4. OTF (OpenType Font)
Released: 1996 | File Extension: .otf | MIME Type: font/otf
Advanced font format supporting complex typography features (ligatures, kerning, alternates). No compression. Better feature support than TTF but larger files. Desktop and professional publishing.
5. EOT (Embedded OpenType)
Released: 1997 | File Extension: .eot | MIME Type: application/vnd.ms-fontobject
Microsoft's proprietary format for Internet Explorer. Only needed for IE 6-8. Compressed format. Essentially obsolete in 2025 but required for very old browser support.
6. SVG (Scalable Vector Graphics)
File Extension: .svg | MIME Type: image/svg+xml
Vector-based font format. Only needed for very old iOS Safari (before version 5). Deprecated for font use. Largest file sizes. Not recommended for modern web.
Compression Comparison
Relative file sizes for the same font (Roboto Regular):
Format Comparison Table
| Format | Compression | File Size | Browser Support | Primary Use | 2025 Status |
|---|---|---|---|---|---|
| WOFF2 | Brotli (Best) | Smallest | Chrome 36+, Firefox 39+, Safari 10+, Edge 14+ | Modern web (primary) | ✓ Recommended |
| WOFF | gzip | Small | Chrome 5+, Firefox 3.6+, Safari 5.1+, IE 9+ | Web (fallback) | ✓ Fallback |
| TTF | None | Large | Universal (all browsers) | Desktop, email | Desktop only |
| OTF | None | Larger | Universal (all browsers) | Desktop, print | Desktop only |
| EOT | LZ compression | Medium | IE 6-8 only | Legacy IE | ✗ Obsolete |
| SVG | None/gzip | Largest | Old iOS Safari (5) | Legacy iOS | ✗ Deprecated |
WOFF2 Format: The Modern Standard
Why WOFF2 is the Best Choice
- Superior Compression: Brotli compression reduces file sizes by 30-50% compared to WOFF, 70-80% compared to TTF. A typical font family that's 500KB in TTF becomes ~150KB in WOFF2.
- Excellent Browser Support: Supported by 98%+ of global browser traffic in 2025. Works in Chrome 36+ (2014), Firefox 39+ (2015), Safari 10+ (2016), Edge 14+ (2016).
- Full OpenType Features: Supports all OpenType features including ligatures, contextual alternates, kerning, small caps, and variable fonts.
- Fast Loading: Smaller files mean faster downloads, especially on mobile networks. Can reduce font loading time from 2 seconds to under 500ms.
- Industry Standard: Recommended by Google, Mozilla, Apple, and W3C. Used by Google Fonts, Adobe Fonts, and all major font services.
When to Use WOFF2
Use WOFF2 for:
- All modern websites and web applications
- Mobile-first responsive designs (file size critical)
- Progressive Web Apps (PWAs)
- High-traffic production websites
- Any project where performance matters
- Projects targeting users with modern browsers (2016+)
WOFF2 Implementation Example
/* Simple WOFF2-only implementation (modern browsers) */
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Preload for faster loading */
<link rel="preload"
href="/fonts/myfont-regular.woff2"
as="font"
type="font/woff2"
crossorigin>
/* Usage in CSS */
body {
font-family: 'MyFont', system-ui, -apple-system, sans-serif;
}WOFF Format: The Reliable Fallback
WOFF Advantages
- Wide Browser Support: Works in Internet Explorer 9+, very old Chrome/Firefox/Safari versions. Covers browsers from 2011 onwards.
- Good Compression: gzip compression provides 40-50% file size reduction compared to TTF. Better than no compression.
- Perfect Fallback: Browsers that don't support WOFF2 almost always support WOFF. Creates seamless fallback chain.
- Stable and Tested: Mature format with 15+ years of production use. No compatibility surprises.
When to Include WOFF
Use WOFF as fallback when:
- Supporting enterprise users with older corporate browsers (IE 9-11)
- Analytics show 1%+ traffic from pre-2016 browsers
- Client requires maximum backwards compatibility
- Government or education sectors (slower browser updates)
- International markets with older devices
Skip WOFF when:
- All users on modern browsers (check analytics)
- Mobile-only application targeting recent iOS/Android
- Internal tool with controlled browser environment
- File size is absolutely critical (every KB matters)
WOFF2 + WOFF Implementation
/* Best practice: WOFF2 first, WOFF fallback */
@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;
}
/* Browser logic:
- Modern browsers: Download WOFF2, skip WOFF
- Older browsers: Skip WOFF2, download WOFF
- Only one file downloaded per browser
*/TTF and OTF Formats: Desktop and Email
TTF (TrueType Font)
Characteristics:
- • No compression: Large file sizes (2-3x larger than WOFF2)
- • Desktop standard: Native format for Windows and macOS
- • Simple structure: Easier to edit and modify with font tools
- • Universal compatibility: Works everywhere including old systems
Best for:
- Desktop applications (Windows, macOS, Linux)
- Email templates (Outlook, Gmail supports TTF better than WOFF)
- Microsoft Office documents
- Font distribution to end users for installation
- Print design workflows
- Legacy systems that don't support WOFF
❌ Do NOT use TTF for web:
- • File sizes 2-3x larger than WOFF2 (hurts performance)
- • No compression overhead wastes bandwidth
- • Slower page loads on mobile networks
- • WOFF2 provides identical visual quality with better performance
OTF (OpenType Font)
Characteristics:
- • Advanced features: Superior typographic capabilities (ligatures, swashes, alternates)
- • PostScript or TrueType outlines: Can use either font technology
- • Larger files: Feature-rich fonts = bigger file sizes
- • Professional standard: Preferred by designers and type foundries
Best for:
- Professional design software (Adobe Creative Suite)
- High-end typography and print work
- Fonts requiring advanced OpenType features
- macOS applications (OTF preferred over TTF)
- Publishing and editorial workflows
TTF vs OTF Decision:
- • Use TTF: If you need Windows compatibility, simpler fonts, or smaller file sizes
- • Use OTF: If you need advanced typography features, macOS compatibility, or professional design work
- • For web: Both convert to WOFF2/WOFF equally well, so original format doesn't matter
Email Template Font Usage
Email clients have limited font support. Here's the reality:
/* Email CSS - Use web-safe fonts primarily */
body {
font-family: 'Arial', 'Helvetica', sans-serif;
}
/* Custom fonts via @font-face (limited support) */
@font-face {
font-family: 'CustomFont';
src: url('https://yourdomain.com/fonts/font.ttf');
/* Use absolute URLs, TTF format for best compatibility */
}
/* Email client support:
✓ Apple Mail (iOS/macOS): WOFF2, WOFF, TTF, OTF
✓ Outlook.com: Limited support
✗ Gmail Web: No @font-face support
✗ Outlook Desktop: No @font-face support
Recommendation: Use system fonts or image-based text
*/EOT and SVG Formats: Legacy and Obsolete
EOT (Embedded OpenType) - Obsolete
Microsoft's proprietary format created in 1997 for Internet Explorer. Only needed for IE 6-8 support.
❌ Do NOT use EOT in 2025:
- • Internet Explorer usage: 0.5% globally (essentially zero)
- • IE 11 supports WOFF (no EOT needed)
- • IE 9-10 supports WOFF (no EOT needed)
- • Only IE 6-8 requires EOT (discontinued 2016)
- • Microsoft ended IE support in 2022
- • EOT adds file size and complexity with zero benefit
Exception: Only include EOT if you must support IE 8 users (government, enterprise legacy systems). Check analytics first—you probably have zero IE 8 users.
SVG Fonts - Deprecated
Vector-based font format embedded in SVG files. Developed for old iOS Safari (before version 5).
❌ NEVER use SVG fonts:
- • Largest file sizes of all formats (2-3x larger than TTF)
- • Officially deprecated by W3C and all browsers
- • iOS Safari 5+ supports WOFF/WOFF2 (no SVG needed)
- • Poor rendering quality compared to modern formats
- • Limited font features support
- • No browser requires SVG fonts in 2025
Note: SVG fonts are different from SVG icons. Never use SVG for fonts, but SVG is excellent for icons and graphics.
Browser Support Guide
Complete Browser Support Matrix
| Browser | WOFF2 | WOFF | TTF/OTF | EOT |
|---|---|---|---|---|
| Chrome | ✓ 36+ (2014) | ✓ 5+ (2010) | ✓ 4+ (2010) | ✗ Never |
| Firefox | ✓ 39+ (2015) | ✓ 3.6+ (2010) | ✓ 3.5+ (2009) | ✗ Never |
| Safari | ✓ 10+ (2016) | ✓ 5.1+ (2011) | ✓ 3.1+ (2008) | ✗ Never |
| Edge | ✓ 14+ (2016) | ✓ All (2015) | ✓ All (2015) | ✗ Never |
| IE 11 | ✗ No | ✓ Yes (2013) | ✓ Yes | ✓ Yes |
| IE 9-10 | ✗ No | ✓ Yes (2011) | Partial | ✓ Yes |
| IE 6-8 | ✗ No | ✗ No | ✗ No | ✓ Only format |
| iOS Safari | ✓ 10+ (2016) | ✓ 5+ (2011) | ✓ All | ✗ Never |
| Android | ✓ 5+ (2015) | ✓ 4.4+ (2013) | ✓ 4+ (2011) | ✗ Never |
2025 Recommendations by Browser Coverage Goal
98%+ Coverage (Recommended for most sites):
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2');
/* WOFF2 only - covers all modern browsers */
}99.5%+ Coverage (Include old Chrome/Firefox/Safari):
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff');
/* WOFF2 + WOFF - covers browsers back to 2010 */
}99.9%+ Coverage (Include IE 9-11):
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff');
/* IE 9-11 support WOFF, so this covers them */
}~100% Coverage (Include ancient IE 6-8) - NOT RECOMMENDED:
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.eot');
src: url('/fonts/myfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff');
/* Only if you absolutely must support IE 8 */
}Use Case Recommendations
Modern Website or Web App
Recommended: WOFF2 only
For most websites built in 2020+, WOFF2 alone provides excellent coverage with optimal performance. Only add WOFF if analytics show significant pre-2016 browser traffic.
/* Optimal modern implementation */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-regular.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}Enterprise/Corporate Website
Recommended: WOFF2 + WOFF
Corporate environments may have older browsers due to IT restrictions. Include WOFF fallback for IE 11 and older desktop browsers still in use.
@font-face {
font-family: 'CorporateFont';
src: url('/fonts/corporate-regular.woff2') format('woff2'),
url('/fonts/corporate-regular.woff') format('woff');
font-weight: 400;
font-display: swap;
}Mobile App (PWA/Responsive)
Recommended: WOFF2 only
Mobile devices update browsers automatically. iOS 10+ and Android 5+ cover virtually all mobile users. Prioritize smallest file size for mobile networks.
/* Mobile-optimized, smallest possible size */
@font-face {
font-family: 'AppFont';
src: url('/fonts/app-regular.woff2') format('woff2');
font-weight: 400;
font-display: swap; /* Important for mobile performance */
}Desktop Application
Recommended: TTF or OTF
Desktop apps should use native font formats for OS integration. Choose TTF for Windows compatibility, OTF for advanced features or macOS preference.
Installation paths:
• Windows: C:\Windows\Fonts\ (use TTF)
• macOS: /Library/Fonts/ or ~/Library/Fonts/ (OTF or TTF)
• Linux: /usr/share/fonts/ or ~/.local/share/fonts/ (TTF or OTF)
Email Template
Recommended: System fonts (avoid custom fonts)
Most email clients don't support @font-face. Use web-safe system fonts for reliability. If you must use custom fonts, host TTF files on CDN.
/* Email-safe font stack */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Helvetica, Arial, sans-serif;
}
/* If absolutely necessary - TTF, absolute URLs */
@font-face {
font-family: 'EmailFont';
src: url('https://cdn.yourdomain.com/fonts/font.ttf');
/* Only works in Apple Mail and some webmail clients */
}Font Distribution/Download
Recommended: Provide all formats
When offering fonts for download, provide multiple formats so users can choose based on their needs:
- • WOFF2 + WOFF: For web developers
- • TTF: For Windows users, general desktop use
- • OTF: For designers, macOS users, print work
- • Package all formats: Create a zip with all versions + usage instructions
Implementation Guide
Complete @font-face Setup
Modern Best Practice (WOFF2 + WOFF):
/* Regular weight */
@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;
}
/* Bold weight */
@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;
}
/* Italic style */
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont-italic.woff2') format('woff2'),
url('/fonts/myfont-italic.woff') format('woff');
font-weight: 400;
font-style: italic;
font-display: swap;
}
/* Usage */
body {
font-family: 'MyFont', -apple-system, BlinkMacSystemFont,
'Segoe UI', system-ui, sans-serif;
}Preloading Fonts
Preload critical fonts for faster loading. Only preload 1-2 most important font files.
<!-- In HTML <head> -->
<link rel="preload"
href="/fonts/myfont-regular.woff2"
as="font"
type="font/woff2"
crossorigin>
<!-- Note: crossorigin is REQUIRED even for same-origin fonts -->
<!-- Only preload critical fonts (usually regular weight) -->
<!-- Don't preload all font variants - hurts performance -->font-display Property
Control how fonts render during loading. Critical for performance and user experience.
font-display: swap; (Recommended)
Show fallback font immediately, swap to custom font when loaded. Best for most sites.
font-display: optional;
Use custom font only if it loads very quickly, otherwise stick with fallback. Good for mobile.
font-display: fallback;
100ms invisible period, then show fallback, swap if font loads within 3s. Balance between swap and optional.
font-display: block; (Avoid)
Hide text until font loads (3s max). Causes "flash of invisible text" (FOIT). Not recommended.
Variable Fonts
Variable fonts contain multiple weights/styles in one file. Excellent for performance when using many weights.
/* Variable font - single file for all weights */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-variable.woff2') format('woff2-variations');
font-weight: 100 900; /* Support weights 100-900 */
font-display: swap;
}
/* Use any weight value */
h1 { font-weight: 850; } /* Intermediate weight */
h2 { font-weight: 650; }
p { font-weight: 400; }
/* Benefits:
- One file replaces multiple weight files
- Smooth weight transitions
- Smaller total file size for 3+ weights
- Supported in all modern browsers (Chrome 62+, Firefox 62+, Safari 11+)
*/Best Practices
Font Format Selection Checklist
- ☐ For modern websites (2020+): Use WOFF2 only unless analytics show need for WOFF fallback
- ☐ For enterprise sites: Use WOFF2 + WOFF to support older corporate browsers
- ☐ For mobile apps: Use WOFF2 exclusively, prioritize smallest file size
- ☐ For desktop apps: Use TTF (Windows) or OTF (macOS/design work)
- ☐ For email: Use system fonts; if custom fonts needed, use TTF with absolute URLs
- ☐ Never use EOT unless you must support IE 8 (check analytics first—likely 0 users)
- ☐ Never use SVG fonts (deprecated format, largest file sizes)
- ☐ Preload critical fonts (1-2 files max) with crossorigin attribute
- ☐ Use font-display: swap to prevent invisible text during loading
- ☐ Consider variable fonts when using 3+ weights/styles from same family
- ☐ Subset fonts to include only characters you need (reduces file size 50-90%)
- ☐ Test in target browsers before deployment
- ☐ Monitor file sizes and loading performance in production
- ☐ Include fallback fonts in font-family stack for reliability
Summary: Choosing the Right Font Format
For modern websites in 2025, WOFF2 is the clear winner—offering superior compression (30-50% smaller than WOFF, 70-80% smaller than TTF), excellent browser support (98%+ coverage), and full OpenType features. Use WOFF2 exclusively for most projects, add WOFF fallback only when supporting legacy browsers (IE 9-11, old Chrome/Firefox/Safari), and reserve TTF/OTF for desktop applications and email templates where web formats aren't supported.
The old practice of serving 5-6 font formats (EOT, WOFF, WOFF2, TTF, OTF, SVG) is obsolete. EOT and SVG fonts are deprecated and unnecessary. TTF and OTF are too large for web use but perfect for desktop. Modern web development requires only WOFF2 (with optional WOFF fallback), reducing complexity while improving performance. Always use font-display: swap, preload critical fonts with crossorigin, and include proper fallback fonts for the best user experience.
Written by
Sarah Mitchell
Product Designer, Font Specialist
Verified by
Marcus Rodriguez
Lead Developer