← Back to Generator

WOFF2 vs WOFF vs TTF: Complete Web Font Format Guide (2026)

Choosing the right web font format directly impacts your site's performance, load time, and Core Web Vitals scores. This guide compares every major format — WOFF2, WOFF, TTF/OTF, EOT, and SVG — so you can make the right choice for your project.

Quick Comparison Table

WOFF2: The Modern Standard

WOFF2 (Web Open Font Format 2.0) is the current industry-standard web font format. It uses Brotli compression to achieve approximately 30% better compression ratios than its predecessor WOFF, resulting in significantly smaller file sizes and faster page loads.

Why WOFF2 is the best choice:

• Best compression ratio: Brotli compression produces the smallest files of any web font format. A 200 KB TTF file typically compresses to 30–40 KB in WOFF2.
• Universal modern support: As of 2026, WOFF2 is supported by over 97% of all browsers in use, including all versions of Chrome, Firefox, Safari, Edge, and Opera released in the last 8+ years.
• Recommended by Google: Google's web performance guidelines explicitly recommend WOFF2 as the primary web font format for optimal Core Web Vitals scores.
• Progressive enhancement: Pair WOFF2 with a WOFF fallback in your @font-face declaration for maximum compatibility.

WOFF: The Reliable Fallback

WOFF (Web Open Font Format 1.0) uses zlib compression and was the first purpose-built web font format. While WOFF2 has largely superseded it, WOFF remains important as a fallback for browsers that don't support WOFF2 — primarily older versions of Internet Explorer (9–11).

When you still need WOFF:

• Your analytics show significant traffic from IE 9–11
• You're building for enterprise environments with locked-down IE browsers
• You want a safety net for edge cases

TTF/OTF: Desktop Formats

TrueType (TTF) and OpenType (OTF) are desktop font formats. While they can technically be used on the web, they are not compressed and produce significantly larger files. Using uncompressed TTF/OTF files on the web wastes bandwidth and hurts your page load performance.

EOT: Internet Explorer Only

Embedded OpenType (EOT) was Microsoft's proprietary web font format, supported exclusively by Internet Explorer. With IE's end of life, EOT is only needed for extremely legacy-focused projects. For the vast majority of websites, EOT can be safely dropped from your font stack.

SVG Fonts: Obsolete

SVG fonts were once needed for iOS Safari versions prior to 5.0 (released in 2012). They are text-based, uncompressed, and produce the largest files. Unless you have a specific requirement for pre-2012 iOS devices, SVG fonts should not be included.

Recommended @font-face Declaration

For maximum compatibility with minimal overhead, use this modern @font-face pattern:

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2'),
       url('MyFont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

This declaration serves WOFF2 to modern browsers and falls back to WOFF for older ones. The font-display: swap property ensures text remains visible while the font loads.

Performance Impact: Real Numbers

Here's how font format choice affects a typical 4-weight font family (Regular, Italic, Bold, Bold Italic):

Combining WOFF2 with font subsetting delivers the best possible performance — often reducing total font payload by over 90%.

Bottom Line

In 2026, the recommendation is simple:

• Use WOFF2 as your primary (and often only) web font format
• Add WOFF as a fallback only if you need IE9–11 support
• Skip EOT and SVG unless you have specific legacy requirements
• Always subset your fonts to remove unused characters
• Use font-display: swap to prevent invisible text during loading

Convert Your Fonts to WOFF2 Now — Free & Private →