Web Fonts Explained — WOFF2, Performance, and How to Stop Fonts from Slowing Your Site

Fonts Are the Silent Performance Killer

A custom font file can be 50-500 KB. If your site uses 4 weights of a single font family (regular, italic, bold, bold italic), that's 200 KB to 2 MB of fonts alone — often the second-largest asset category after images.

Worse, fonts block text rendering. Until the font file downloads, the browser either shows invisible text (FOIT — Flash of Invisible Text) or swaps in a system font then jumps when the custom font arrives (FOUT — Flash of Unstyled Text). Both feel broken to users.

The Font Format Landscape in 2026

Format	Size	Browser Support	Use Case
WOFF2	Smallest (30-50% smaller than TTF)	97%+	The standard for web
WOFF	Small	99%+	Legacy fallback
TTF/OTF	Large	99%+	Desktop use, not web
EOT	Medium	IE only	Dead format
SVG fonts	Largest	Deprecated	Dead format

In 2026, you only need WOFF2. The 3% of browsers that don't support it will fall back to system fonts, which is perfectly acceptable.

Convert fonts to WOFF2 with MyPDF's Font Converter.

Google Fonts vs Self-Hosting

Google Fonts (CDN)

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Pros: Zero setup, CDN-cached, auto-optimized.
Cons: Third-party request (privacy/GDPR concerns), extra DNS lookup, potential single point of failure.

Self-Hosting

Download the WOFF2 files and serve them from your own domain.

Pros: No third-party requests, full control, works offline, GDPR-friendly.
Cons: You manage caching, subsetting, and updates.

The verdict in 2026: Self-hosting wins for performance. The "shared cache" advantage of Google Fonts (multiple sites sharing the same cached font) was eliminated when Chrome partitioned its cache by site in 2020.

Font Subsetting: The Biggest Win You're Not Using

Most fonts contain glyphs for Latin, Cyrillic, Greek, Vietnamese, and various symbols — thousands of characters. If your site is English-only, you're shipping characters you'll never display.

Subsetting strips unused characters from the font file. The results are dramatic:

Font	Full File	Latin Subset	Savings
Inter Regular	98 KB	18 KB	82%
Roboto Regular	85 KB	15 KB	82%
Open Sans Regular	92 KB	17 KB	81%
Noto Sans Regular	315 KB	22 KB	93%

Google Fonts does this automatically (it serves language-specific subsets). If you're self-hosting, you need to subset manually. MyPDF's TTF to WOFF2 converter can help with format conversion. For subsetting, tools like the Google Fonts Helper or Glyphhanger handle the character selection.

The Perfect Font Loading Strategy

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
}

The key properties:

• font-display: swap — Shows system font immediately, swaps when custom font loads. Prevents invisible text.
• unicode-range — Only downloads the font file when characters in that range appear on the page.
• woff2 only — Don't bother with WOFF/TTF fallbacks in 2026.

Preload Critical Fonts

For your most important font (usually the body text), preload it:

<link rel="preload" href="/fonts/inter-regular.woff2" as="font" type="font/woff2" crossorigin>

This tells the browser to start downloading the font immediately, before it even parses the CSS. Reduces FOUT significantly.

Only preload 1-2 fonts. Preloading everything defeats the purpose.

How Many Font Weights Do You Really Need?

Every weight is another file download. Be ruthless:

What You Think You Need	What You Actually Need
Light, Regular, Medium, SemiBold, Bold, ExtraBold	Regular, Bold
Regular, Italic, Bold, Bold Italic	Regular, Bold (use CSS font-synthesis for italic)
Display font + Body font (8 files)	One variable font (1 file)

Variable fonts contain all weights in a single file. Inter Variable (105 KB) replaces 9 separate weight files that would total 400+ KB. Check if your font has a variable version before downloading multiple static files.

Measuring Font Performance

Use Chrome DevTools → Network → filter by "font" to see:

• How many font files are being loaded


• Their sizes


• When they finish downloading relative to first paint

Core Web Vitals affected by fonts:

• LCP (Largest Contentful Paint) — Delayed if hero text uses a custom font


• CLS (Cumulative Layout Shift) — Font swap causes text to reflow

A well-optimized font setup adds zero CLS and minimal LCP impact.

Related Tools

• TTF to WOFF2 — Convert desktop fonts to web format
• Font Converter — Convert between font formats
• OTF to TTF — OpenType to TrueType conversion
• WOFF to TTF — Extract desktop fonts from web files