Optimizing Font Loading Performance and FOIT/FOUT Avoidance Strategies in Frontend Applications

Problem Description
Font loading optimization is a key aspect of frontend performance, primarily addressing two major issues:

1. FOIT (Flash of Invisible Text): Text is invisible during font loading, causing blank spaces in the layout.
2. FOUT (Flash of Unstyled Text): A fallback font is displayed before the intended font loads, resulting in a sudden switch after loading.
   Both phenomena negatively impact user experience and Core Web Vitals (such as CLS). A systematic approach to optimizing font loading strategies is required.

Detailed Optimization Steps

1. Understanding the Font Loading Lifecycle

• Block Period: The browser typically waits for the font to load (approx. 3 seconds), during which text is invisible (FOIT).
• Swap Period: After the timeout, a fallback font is displayed, and a switch occurs once the intended font loads.
• Failure Period: Handling strategies when font loading fails.
  The font-display property can control behavior across these stages, forming the foundation of optimization.

2. Using the font-display Property to Control Loading Behavior
Define font display strategies within @font-face:

@font-face {
  font-family: 'OptimizedFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* Key property: Avoids FOIT */
}

Common value explanations:

• auto: Default behavior, prone to causing FOIT.
• block: Very short block period (~100ms), may still cause layout shifts.
• swap: No block period, immediately displays fallback font; ideal for performance optimization.
• fallback: Balanced approach (~100ms block period, 3-second swap period).
• optional: Decides whether to use the custom font based on network conditions.

3. Preloading Critical Font Resources
Use \u003clink rel="preload"\u003e to load fonts required for above-the-fold content early:

\u003clink rel="preload" href="critical-font.woff2" as="font" type="font/woff2" crossorigin\u003e

Important notes:

• Preload only fonts essential for initial render (typically 2-3 variants).
• The crossorigin attribute is mandatory; otherwise, fonts may be downloaded twice.
• Use Chrome DevTools' Coverage tool to identify critical fonts.

4. Using CSS size-adjust Property to Reduce Layout Shifts
Match the dimensions of fallback fonts to target fonts using descriptors:

@font-face {
  font-family: 'FallbackFont';
  size-adjust: 105%; /* Adjust fallback font size to match target font */
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Implementation steps:

1. Measure key metrics of the target font (x-height, ascender/descender, etc.).
2. Use online tools (e.g., Google Fonts' Font Matcher) to calculate adjustment values.
3. Dynamically apply adjustments via CSS custom properties.

5. Implementing Font Loading State Monitoring and Optimization
Use the Font Loading API for precise control over the loading process:

const font = new FontFace('OptimizedFont', 'url(font.woff2)');
document.fonts.add(font);

font.load().then(() => {
  document.documentElement.classList.add('fonts-loaded');
  // Trigger precise layout updates to avoid CLS
}).catch((error) => {
  console.error('Font loading failed:', error);
});

Accompanying CSS to control display logic:

.body-text {
  font-family: system-ui, sans-serif; /* Fallback font */
}
.fonts-loaded .body-text {
  font-family: OptimizedFont, system-ui, sans-serif;
}

6. Advanced Optimization: Session Persistence and Caching Strategies
Utilize localStorage to store loaded font status:

// Store status after successful font load
if (!localStorage.getItem('fontCached')) {
  font.load().then(() => {
    localStorage.setItem('fontCached', 'true');
    activateFont();
  });
} else {
  activateFont(); // Directly activate cached font
}

Combine with Service Worker to cache font resources, enabling offline availability and faster subsequent loads.

7. Performance Monitoring and Error Handling
Integrate performance observation mechanisms:

// Monitor font loading time
const perfObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name.endsWith('.woff2')) {
      console.log(`Font load time: ${entry.duration}ms`);
      // Can send to monitoring system
    }
  });
});
perfObserver.observe({entryTypes: ['resource']});

Implement timeout fallback mechanisms to ensure content rendering is not blocked by font loading failures.

Summary
Font loading optimization requires a combined application of CSS control, resource preloading, API monitoring, and caching strategies. The core objectives are:

• Eliminate layout shifts (CLS optimization).
• Reduce invisible text time.
• Ensure content accessibility.
  By systematically implementing these strategies, font rendering performance and user experience can be significantly improved.