Performance

Web Font Optimization for Speed: Avoiding LCP, CLS, and FOIT

Web Font Optimization for Speed: Avoiding LCP, CLS, and FOIT
06
Jun

Why Web Fonts Matter for Core Web Vitals

Web fonts are one of the most overlooked performance killers. When a developer loads a 300KB font file to render a headline, they’re not just delaying text display—they’re damaging Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), two of Google’s three Core Web Vitals metrics that directly influence search ranking and user experience.

A custom font can delay LCP by 500–1500ms and create jarring layout shifts when the fallback font swaps to the web font. For modern e-commerce sites running WooCommerce or product-heavy WordPress installs, this translates directly to abandoned carts and lost revenue.

The good news: font optimization is one of the highest-ROI performance wins available. Most sites can cut font bytes by 70–93% and eliminate font-related CLS entirely with four core techniques: subsetting, WOFF2 compression, preloading, and intelligent font-display rules.

Understanding Font-Display: swap vs. optional

The font-display CSS descriptor controls how the browser handles text rendering while a web font loads. It’s the most powerful lever you have to prevent FOIT (Flash of Invisible Text) and layout shifts.

font-display: swap (Most Common)

With font-display: swap, the browser displays the fallback font immediately, then swaps to the web font once it arrives. This eliminates FOIT but introduces risk: if the fallback font is much larger or narrower than the web font, users see content jump when the swap happens.

According to web.dev’s font best practices guide, font-display: swap is used by approximately 50% of websites because it balances readability (text appears immediately) with design fidelity (web fonts eventually load).

font-display: optional (Performance-First)

For pure performance, use font-display: optional. The browser gives the font 100ms to load. If it arrives in time (typically from cache or a preload), it’s used. If not, the fallback font is used for the entire page load—and no font swap ever occurs, guaranteeing zero layout shifts.

The tradeoff: if fonts aren’t cached, users see the fallback font on first visit. For Google Fonts and branded fonts, this is often acceptable because system fonts like system-ui, Segoe UI, and Roboto are genuinely readable.

Avoiding FOIT with font-display

FOIT (Flash of Invisible Text) occurs with font-display: block, which hides text for up to 3 seconds while the font loads. Never use block for body text. Always pair swap or optional with preloading (see below) to minimize FOIT windows.

Preventing Layout Shifts with size-adjust and Fallback Metrics

Font swaps cause layout shifts because fallback fonts and web fonts have different metrics—different x-height, cap height, and character width. A visitor reads the first sentence in fallback font, text suddenly narrows when the web font arrives, and their eye loses its place.

The CSS font-family fallback order is critical:

@font-face {
  font-family: 'Inter';
  src: url('inter.woff2') format('woff2');
  font-display: swap;
  size-adjust: 102%;
}

body {
  font-family: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

The size-adjust descriptor scales the fallback font to match the web font’s metrics. According to DebugBear’s research on font layout shifts, using size-adjust combined with ascent-override and descent-override can eliminate 80–95% of font-swap CLS.

Tools like Capsize automatically extract metric values and generate size-adjust rules, removing the guesswork.

Subsetting: Cut Font Size by 70–93%

A full Inter or Roboto variable font file is 150–300KB. But an English-language website uses only ~250 of the font’s 2000+ glyphs. Subsetting removes unused characters, cutting file size dramatically.

For example, Inter drops from 303KB to 22KB (93% reduction) when subset to Latin characters only. For CJK (Chinese, Japanese, Korean) sites, subsetting savings are even larger because those fonts contain tens of thousands of glyphs.

Subsetting Strategies

  • Latin-only: Removes accented characters unused in English; appropriate for US and many English-speaking regions.
  • Latin Extended: Keeps accented characters for European languages (é, ñ, ü).
  • Unicode Range: Subset to specific Unicode ranges (e.g., U+0000-U+00FF for Basic Latin).

Free tools like Glyphanger (by Zach Leatherman) analyze your HTML and automatically create subsets containing only glyphs actually rendered on your pages.

WOFF2: The Modern Font Format

WOFF2 is the modern standard. It compresses fonts 30% better than WOFF and has near-universal browser support (98%+ globally). Always convert TTF or OTF to WOFF2 before uploading.

According to web.dev, WOFF2 combined with subsetting forms the foundation of every high-performance typography implementation. A fallback to WOFF is acceptable for older browsers, but serving TTF or OTF in 2026 is indefensible from a performance standpoint.

Conversion is trivial using free tools like Convertio or command-line utilities like FontForge and Brotli.

Variable Fonts: One File for Many Weights and Styles

A traditional font family requires separate files for each weight (400, 500, 700) and style (regular, italic): 4–10 files totaling 600–2000KB. A variable font bundles all weights and styles into a single file using OpenType variation tables.

For example, a variable font with weights 100–900 and roman + italic styles might be 150–250KB total instead of 800KB for separate files. The browser interpolates intermediate weights on the client—so 550 weight renders automatically without an extra file.

Variable fonts shine when combined with subsetting. A variable Inter font drops from 303KB to 22KB when subset to Latin, covering all weights and styles from a single file.

Self-Hosting vs. Google Fonts: Performance and Privacy

Self-Hosting: The Performance Win

Serving fonts from your own domain (self-hosting) eliminates DNS lookups, connection overhead, and third-party latency. Testing by WP Rocket showed:

  • First Contentful Paint: 2.5s → 1.4s (44% faster)
  • Mobile performance score: 72 → 79

With HTTP/2 multiplexing and caching headers, self-hosted fonts load faster than remote CDNs.

The Privacy Case Against Google Fonts CDN

Remote Google Fonts requests send the user’s IP address to Google’s servers, which European courts ruled illegal under GDPR and privacy directives. Self-hosting eliminates this exposure and is now mandatory for GDPR compliance in most EU jurisdictions.

Three Ways to Self-Host in WordPress

Method Time Difficulty Best For
Native Block Editor (WordPress 6.5+) 2 minutes Easy Block themes; zero plugins
Plugin (WP Rocket, OMGF) Instant Very Easy Non-technical users; existing setups
Manual (@font-face + FTP) 30–45 min Moderate Complete control; custom fonts

For WordPress and WooCommerce sites, the easiest method is a plugin like OMGF, which automatically caches Google Fonts locally with zero configuration. Alternatively, WP Rocket offers a one-checkbox self-hosting option.

Preloading Critical Fonts

If a web font renders above the fold (visible on page load), preload it to give the browser early notice:

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

Preload tells the browser, “Download this font early, before rendering the page.” Combined with font-display: swap, preloaded fonts typically arrive before the swap window, eliminating both FOIT and CLS.

Warning: web.dev advises caution with preload—it diverts browser resources from other critical assets. Preload only the 1–2 fonts actually used above the fold, not entire families.

WordPress and WooCommerce Font Optimization

WordPress themes and plugins load fonts from multiple sources, often redundantly. A typical WooCommerce store might load fonts from the theme, page builder, icon library, and Google Fonts CDN—sometimes the same font multiple times.

Font Audit: What to Look For

  • Theme fonts: Check functions.php and style.css
  • Plugin fonts: Page builders (Elementor, Divi), icon libraries, custom fonts
  • Google Fonts instances: Multiple requests to fonts.googleapis.com for the same font
  • Third-party CDNs: Adobe Fonts, FontAwesome, custom web font services

Recommended Plugins and Themes

Font Optimization Plugins:

  • OMGF — Auto-caches Google Fonts locally, preloads critical fonts, removes unused weights.
  • Yabe Webfont — Local hosting with automatic subset detection.

Fast WooCommerce Themes (Built-in Optimization):

  • GeneratePress — Modular, fast, allows disabling unused font-heavy plugins.
  • Rishi — 1000+ Google Fonts with smart preloading and caching.

Vilee LLC combines deep technical expertise in WordPress/WooCommerce development with AI-powered automation to operate 520+ profitable online businesses at scale.

Font Optimization Checklist

  • ☐ Audit all font sources (theme, plugins, CDNs); remove duplicates
  • ☐ Convert fonts to WOFF2 format (30% size reduction)
  • ☐ Subset fonts to needed languages/characters (70–93% size reduction)
  • ☐ Set font-display: swap for above-fold fonts; optional for below-fold
  • ☐ Preload 1–2 critical fonts with <link rel="preload">
  • ☐ Add size-adjust, ascent-override, descent-override to prevent CLS
  • ☐ Consider variable fonts for multiple weights/styles
  • ☐ Self-host fonts (eliminate Google CDN latency and privacy issues)
  • ☐ Test with Lighthouse, PageSpeed Insights; verify LCP and CLS improvement
  • ☐ Enable HTTP/2 and caching headers on font files

Real-World Impact: Expected Improvements

A typical WordPress or WooCommerce site applying these techniques sees:

  • LCP: 300–800ms improvement (10–30% reduction)
  • CLS: Reduction from 0.1–0.3 to 0–0.05 (zero layout shift)
  • Total font bytes: 70–93% reduction via subsetting + WOFF2
  • Time to First Paint: 200–500ms faster

These improvements directly improve Google search rankings (Core Web Vitals are a ranking signal) and reduce bounce rates caused by slow or janky font loading.

Common Mistakes to Avoid

  • Preloading too many fonts: Preload only 1–2 critical above-fold fonts. Preloading 5 fonts steals resources from images and CSS.
  • Using font-display: block: Hides text for 3 seconds. Use swap or optional.
  • Not subsetting: Serving a full 300KB font when you need 30KB is wasting bandwidth and parsing time.
  • Ignoring fallback fonts: A good fallback stack (-apple-system, Segoe UI, Roboto, sans-serif) is 80% as readable as custom fonts with zero latency.
  • Storing fonts on a slow server: Self-host only if your server/CDN is faster than Google’s. If unsure, benchmark first.

Next Steps: Begin Your Font Audit Today

Start by auditing your site’s font loading with Google PageSpeed Insights or Lighthouse (DevTools → Lighthouse). The report identifies font-related LCP and CLS issues.

Then implement in this order:

  1. Reduce fonts: Delete unused Google Fonts and plugins.
  2. Self-host: Move Google Fonts to your domain (1 hour with OMGF plugin).
  3. Subset: Remove unused characters (saves 60–90%).
  4. Add preload: Preload 1 critical font.
  5. Fix CLS: Add size-adjust rules to prevent layout shifts.

Web font optimization isn’t complex—it’s just overlooked. Most sites can cut font bytes by 80% and improve Core Web Vitals within a week. See our guide on how to speed up WordPress for additional techniques.

Sources

Ready to optimize your fonts and boost Core Web Vitals? Contact Vilee LLC for a free performance audit, or explore our services.

Frequently Asked Questions

Frequently Asked Questions

What's the difference between font-display: swap and font-display: optional?

With font-display: swap, text displays immediately using a fallback font, then swaps to the web font when loaded—risking layout shift. With font-display: optional, the browser gives the font 100ms to load; if it arrives, the web font is used; if not, the fallback is used for the entire page load with zero swaps and zero layout shifts. Use swap for branded fonts you want to display; use optional for pure performance.

How much can subsetting reduce font file size?

Subsetting typically cuts font file size by 70–93%. For example, Inter drops from 303KB (full character set) to 22KB (Latin-only subset). The savings depend on how many characters the full font includes versus how many your site actually uses. Tools like Glyphanger analyze your HTML and create subsets containing only rendered glyphs.

Should I self-host Google Fonts or use the CDN?

Self-host if possible. Self-hosting eliminates DNS lookups and third-party latency (44% faster First Contentful Paint in real tests), and is mandatory for GDPR compliance in the EU (Google Fonts CDN sends IP addresses to Google’s servers, which courts ruled illegal). Use a plugin like OMGF for WordPress; it takes 30 seconds to set up.

Daniel Reed

Daniel Reed leads performance and infrastructure coverage at Vilee LLC, writing about WooCommerce speed, caching, CDNs, and Core Web Vitals.

Talk to us →