How to Load Fonts in a Way That Fights FOUT and Makes Lighthouse Happy

Web font implementation seems straightforward: select fonts, grab the code, integrate, and verify display. Many use Google Fonts daily, simply adding its <link> tag. However, Lighthouse often flags this as problematic. Why? Let's explore eliminating render-blocking font stylesheets and creating an optimal setup that pleases Lighthouse while preventing the dreaded Flash of Unstyled Text (FOUT). We'll use only HTML, CSS, and JavaScript for broad applicability.

Render-Blocking Fonts Explained

Browser website loading involves creating a render tree from the DOM (HTML object model) and CSSOM (CSS selector map). This is part of the critical render path. The browser needs to load and parse the HTML and all linked CSS files.

A typical Google Fonts stylesheet looks like this:

<code>@font-face {
  font-family: 'Merriweather';
  src: local('Merriweather'), url(https://fonts.gstatic.com/...) format('woff2');
}</code>

While seemingly small, these stylesheets, especially when loaded from external CDNs, cause delays. The browser must wait for the stylesheet and then the referenced font file to load, extending the render time. This makes the font file part of the critical render path.

Content is paramount. To prioritize it, minimize the critical render path to essential resources (HTML and critical CSS), deferring everything else, including fonts, until after rendering. This prevents users on slow connections from encountering frustrating blank screens while waiting for fonts to load.

Optimal Font Loading

Harry Roberts' approach is excellent:

1. Preconnect: To the font origin.
2. Preload: The stylesheet asynchronously, low priority.
3. Asynchronous Loading: Load the stylesheet and font file after content rendering using JavaScript.
4. Fallback Font: For users with JavaScript disabled.

Implementation:

<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link as="style" href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="preload">
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" media="print" onload="this.media='all'" rel="stylesheet">

The media="print" attribute gives the stylesheet low priority, excluding it from the critical render path. onload switches the media to all after loading. Self-hosting fonts can also help, but CDNs often remain necessary.

This optimization, however, introduces FOUT.

Addressing FOUT

FOUT is the visible shift from fallback to web font. Mitigation involves:

1. Suitable Fallback Font: Closely matching the web font.
2. Matching Styles: Adjusting fallback font styles (size, line-height, etc.) to match the web font.
3. Style Clearing: Removing fallback styles once the web font loads and applying web font styles.

The CSS Font Loading API helps detect web font loading. While libraries like Typekit's loader exist, they are outdated and unnecessary given our efficient asynchronous loading. The API's check() function determines font availability:

document.fonts.check("12px 'Merriweather'");

Ensure an HTML element with the web font declaration exists (even hidden) for the API to track. The font name in check() must match the CSS declaration.

A simple listener using this API smoothly transitions between fonts, minimizing FOUT. Error handling and a JavaScript-disabled fallback are crucial.

Implementation Details

The HTML includes a hidden <div> with the web font applied, essential for API tracking. CSS uses classes to manage styles for fallback and web fonts. JavaScript uses <code>setInterval to periodically check font loading via the API, applying the appropriate styles and clearing the interval once loaded. Error handling ensures fallback styles are applied in case of API issues.

Gatsby Implementation

A Gatsby plugin simplifies this process, separating configuration (gatsby-config.js), server-side code (gatsby-ssr.js), and client-side code (gatsby-browser.js). The plugin manages preload, preconnect tags, hidden font elements, and the font loading listener.

A pre-built gatsby-omni-font-loader plugin is available for easy integration.

Conclusion

Prioritizing content is key. Asynchronous font loading, combined with a font loading listener and a carefully chosen fallback font, ensures a smooth user experience, eliminating render-blocking issues and minimizing FOUT. Consider using a pre-built plugin for simpler implementation in Gatsby.