Preload only 1–2 critical fonts using rel="preload" with as="font", type="font/woff2", and crossorigin to speed up delivery without blocking other resources. 2. Use font-display: swap in @font-face to ensure text is visible immediately, preventing FOIT and allowing a smooth swap to the custom font once loaded. 3. Serve WOFF2 format for modern browsers due to its superior compression, with WOFF as fallback for older browsers, reducing file size by over 30%. 4. Subset fonts to include only necessary characters for your supported languages, significantly reducing file size, especially for large or non-Latin fonts. 5. Lazy load non-critical fonts (e.g., for below-the-fold content) using the Font Loading API or JavaScript to avoid render-blocking and prioritize core content. 6. Self-host fonts when possible to eliminate third-party dependencies, improve caching control, and reduce DNS/TCP/TLS overhead, especially when combined with HTTP/2 or HTTP/3. 7. Set long-term caching with Cache-Control: public, max-age=31536000, immutable and versioned filenames to prevent re-downloads on repeat visits. 8. Minimize the number of font weights and styles to 2–3 essential ones, using CSS font-weight to simulate missing variants and reduce requests and bandwidth. Optimizing font loading ensures fast, beautiful typography by delivering only what is needed, when it is needed, while keeping content instantly readable.

Web fonts give sites a visual identity, but if not handled carefully, they can hurt performance—leading to layout shifts, invisible text (FOIT), or delayed rendering. Optimizing font loading ensures your site looks great and stays fast. Here’s how to do it right.

1. Preload Critical Fonts

If you're using custom fonts for headings or body text above the fold, preload them to speed up delivery.

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

• Use rel="preload" for key fonts (e.g., primary heading or body font).
• Always include as="font" and type="font/woff2" to help the browser prioritize correctly.
• Add crossorigin even for same-origin fonts—required for font preloading due to CORS policies.

?? Don’t overuse preload—only apply it to 1–2 critical fonts. Preloading too many blocks other important resources.

2. Use font-display for Better Rendering Control

The font-display descriptor in @font-face controls how fonts render while loading. Use swap to avoid invisible text.

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

• swap: Shows fallback text immediately, then swaps to custom font when loaded. Prevents FOIT.
• optional: Lets the browser decide whether to use the custom font based on network conditions. Good for slower connections.
• Avoid block unless absolutely necessary—it delays text rendering.

swap is usually the best choice: users see content instantly, and design refines as fonts arrive.

3. Serve Modern Formats (WOFF2)

Always serve WOFF2 when possible—it’s compressed and supported by all modern browsers.

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

• WOFF2 reduces file size by 30% compared to WOFF.
• Include WOFF as a fallback only for older browsers.

Convert fonts using tools like Font Squirrel or woff2_compress.

4. Subset Fonts for Key Languages

If your site only supports English (or a few languages), subset your fonts to include only needed characters.

• Reduces font file size significantly.
• Tools like Google Fonts let you request subsets (e.g., &text=Hello).
• For self-hosted fonts, use tools like pyftsubset:

pyftsubset font.woff2 --text="abcdefghijklmnopqrstuvwxyz" --output=subset.woff2

Subsetting is especially helpful for large fonts like bold weights or non-Latin scripts.

5. Lazy Load Non-Critical Fonts

Fonts used below the fold (e.g., for blog post quotes or footers) can be loaded after initial render.

Use JavaScript to load them asynchronously:

// Load non-critical font after page load
document.fonts.load("16px CustomFont-Light").then(() => {
  document.body.classList.add("font-loaded");
});

Or use the Font Loading API to control timing.

This prevents fonts from competing with core content during page load.

6. Host Fonts Yourself (When Possible)

Third-party font hosts (like Google Fonts) are convenient but add DNS, TCP, and TLS overhead.

Self-hosting gives you:

• Better control over caching and delivery.
• No external dependency.
• Ability to bundle with other assets (if using a build process).

To self-host Google Fonts:

• Download fonts via google-webfonts-helper.
• Host locally and preload.

Bonus: Combine with HTTP/2 or HTTP/3 for faster multiplexed delivery.

7. Leverage Caching

Set long cache headers for font files (e.g., 1 year):

Cache-Control: public, max-age=31536000, immutable

• Browsers won’t re-download fonts on repeat visits.
• Use versioned filenames (e.g., font-v2.woff2) to force updates.

immutable tells the browser the resource won’t change during the cache period—great for static assets.

8. Minimize Number of Font Weights and Styles

Each font variation (light, regular, bold, italic) is a separate file.

Instead of loading 5 weights, ask:

• Do you really need Light, Regular, Medium, Bold, and ExtraBold?
• Can CSS font-weight: 500 approximate Medium without a separate file?

Try to limit to 2–3 weights max.

Fewer font files = fewer requests less bandwidth faster render.

Optimizing font loading isn’t about removing fonts—it’s about delivering them smarter. Preload critical ones, use font-display: swap, serve WOFF2, subset, and self-host when it makes sense. The result? Beautiful typography without sacrificing speed.

Basically: load what you need, when you need it, and make sure users can read your content immediately.

The above is the detailed content of Optimizing Font Loading and Performance on the Web. For more information, please follow other related articles on the PHP Chinese website!