Web Fonts Optimization: Load Fonts Faster and Better

Why Font Optimization Matters

I once added "just one more font weight" to a project and watched the Lighthouse score drop by 15 points. Web fonts are powerful for design, but they come with a real performance cost that's easy to underestimate.

The good news? There are practical strategies to get beautiful typography without killing your page speed. Here's what works.

Font Loading Strategies

1. Font Display Swap

Show fallback text immediately, swap to web font when loaded:

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
}

2. Font Display Optional

Use fallback if font doesn't load quickly:

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: optional;
}

Choosing the Right Format

WOFF2 (Recommended)

• Best compression
• Supported by all modern browsers
• 30% smaller than WOFF

WOFF

• Good compression
• Wider browser support (older browsers)

TTF/OTF

• Largest file size
• Use only as fallback

Subsetting Fonts

Include only the characters you need:

/* Latin subset only */
@font-face {
  font-family: 'CustomFont';
  src: url('font-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

Preloading Critical Fonts

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Self-Hosting vs CDN

Self-Hosting

• Full control over caching
• No external dependency
• Better privacy

Google Fonts CDN

• Global edge caching
• Automatic subsetting
• Easy to use

Variable Fonts

One file contains all weights and styles:

@font-face {
  font-family: 'Inter';
  src: url('Inter-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
}

h1 { font-weight: 700; }
p { font-weight: 400; }

Benefits:

• Single HTTP request
• Smaller total file size
• Dynamic weight selection

Best Practices

1. Limit font weights: Use 2-3 max
2. Preload critical fonts: Above-the-fold text
3. Use font-display: swap: Prevent invisible text
4. Subset fonts: Remove unused characters
5. Use WOFF2: Best compression
6. Consider system fonts: For maximum performance

Font Optimization in T-Tools

For T-Tools, I made several font decisions that improved performance:

1. System fonts for UI: The main interface uses system fonts (-apple-system, BlinkMacSystemFont, etc.). Zero download time, perfect native feel.
2. Single web font for content: Only Inter is loaded as a web font, using font-display: swap to prevent invisible text.
3. Preloaded the critical font: The Inter font file is preloaded so it's available immediately for above-the-fold content.
4. WOFF2 only: I excluded WOFF and TTF formats since all modern browsers support WOFF2.

Result: Font-related blocking time dropped from 800ms to under 100ms.