Fontastic Web Performance

The WOFF2 Revolution: Modern Font Formats Explained

WOFF2 (Web Open Font Format 2) represents the optimal balance of compression efficiency and browser support. This format has fundamentally changed how we deliver web typography:

• 26% better compression than WOFF1 through Brotli compression algorithms
• 97%+ browser support -- universal adoption across Chrome, Firefox, Safari, and Edge
• No format fallbacks needed -- single format strategy dramatically simplifies implementation

According to the Web Almanac 2022 fonts chapter, WOFF2 has become the dominant format for web font delivery. Legacy formats like TTF, OTF, and EOT should be phased out as they lack compression and create unnecessary complexity.

Proper @font-face implementation with WOFF2:

@font-face {
 font-family: 'CustomFont';
 src: url('/fonts/customfont.woff2') format('woff2');
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

The src ordering matters significantly--placing local sources first allows users with the font already installed to avoid downloads entirely. Always include the format('woff2') hint to help browsers identify the format quickly.

Advanced CLS Prevention with size-adjust

Prevent Cumulative Layout Shift when fonts swap by making fallback fonts match custom font metrics. The size-adjust descriptor scales the fallback font to approximate the custom font's dimensions:

@font-face {
 font-family: 'BrandFont-Fallback';
 src: local('Arial');
 size-adjust: 93%;
 ascent-override: 117%;
 descent-override: 95%;
}

body {
 font-family: 'BrandFont', 'BrandFont-Fallback', sans-serif;
}

How the descriptors work together:

• size-adjust -- scales the overall font size (usually 85-100% depending on font comparison)
• ascent-override -- adjusts the ascender height relative to the em square
• descent-override -- adjusts the descender depth

To determine appropriate values, compare your custom font's metrics (available from font file metadata or tools like fontkit) with system fallback fonts. The goal is minimizing the visual difference between fallback and custom fonts during the swap. When properly configured, users often don't notice the font change at all--CLS drops to near zero while maintaining instant text visibility.

This technique is particularly valuable for Core Web Vitals optimization, where even small layout shifts can push scores into the poor range (>0.25).

Font Subsetting: Eliminating Unnecessary Weight

Font subsetting removes unused characters from font files, dramatically reducing file size. For English-language sites, subsetting typically reduces font weight by 50-70%, with even greater savings when combining subsetting with removing unused weights and styles.

As documented by Ariel Salminen's webfont optimization case study, real-world results demonstrate the impact:

• Before optimization: 350.3KB total font weight
• After subsetting: 147.7KB
• Reduction: 202.6KB (58%) -- significant page weight eliminated

Subsetting workflow with glyphhanger:

# Install glyphhanger
npm install -g glyphhanger

# Analyze pages for required glyphs
glyphhanger https://yoursite.com

# Subset font with discovered unicode-range
glyphhanger --whitelist=U+20-7E,U+410-44F --formats=woff2 --subset=font.otf

The glyphhanger tool analyzes your actual content to determine which characters are used, then creates subsetted fonts containing only those characters. This approach ensures you never ship unused glyphs while guaranteeing all content remains legible.

When subsetting is essential:

• Multi-language sites (subset per language, not all languages in one file)
• Sites using limited character sets (Latin-only, numbers and symbols)
• Performance-critical pages (landing pages, hero sections)

When to use caution:

• User-generated content requiring full character support
• Sites with dynamic content in multiple languages
• Forms that accept international input

Preloading Critical Fonts for LCP Improvement

The <link rel="preload"> directive signals browsers to fetch fonts early in the page load process, improving Largest Contentful Paint for text-heavy pages. This eliminates font-related render blocking for above-the-fold typography:

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

When to preload:

• Font used in LCP element (hero text, headline, navigation)
• Font provides significant above-the-fold brand impact
• Font is not already cached from previous visits
• Page performance testing confirms benefit

When NOT to preload:

• Fonts used across many pages (browser caching handles it)
• Multiple fonts competing for limited bandwidth
• Above-the-fold content doesn't rely on custom typography
• Preloading causes other resources to be delayed

As the DEV Community font checklist notes, preloading is a powerful tool but should be applied strategically. Over-preloading wastes bandwidth and can actually harm performance by creating competition between font downloads and other critical resources like images or JavaScript.

Testing methodology: Use Lighthouse or WebPageTest to identify font-related render blocking. Compare page load with and without preloading to validate that preloading actually improves metrics rather than causing bandwidth competition.

Advanced Techniques: Variable Fonts

Variable fonts enable multiple weights, widths, and styles from a single file, reducing HTTP requests and simplifying caching. For sites using multiple font weights, variable fonts can cut font-related bandwidth by 30-50%:

@font-face {
 font-family: 'VariableFont';
 src: url('/fonts/variable.woff2') format('woff2-variations');
 font-weight: 100 900;
 font-stretch: 75% 125%;
 font-display: swap;
}

/* Usage with CSS custom properties */
h1 {
 font-variation-settings: 'wght' 700, 'wdth' 85;
}

p {
 font-variation-settings: 'wght' 400, 'wdth' 100;
}

Variable font axes:

• wght (weight): Typically 100-900 for boldness variation
• wdth (width): Condensed to extended variations
• slnt (slant): Italic-style variations
• opsz (optical size): Screen-optimized weight variations
• Custom axes: Designer-defined variations

Benefits summary:

• Single HTTP request instead of 4-6 files for traditional multi-weight font families
• 30-50% smaller total footprint than equivalent static font files
• Simpler cache invalidation (one file to update)
• Granular typography control for responsive design
• Future-proof system supporting unlimited weight/width combinations

Implementation considerations: Not all fonts are available as variable fonts--verify availability before committing to this approach. Browser support for WOFF2-variations is excellent in modern browsers, with graceful fallback to static fonts for older browsers through traditional @font-face blocks.