Fixing FOIT: How to Optimize Font Rendering and Improve Your LCP

We all know that fonts can make a website look great. But what happens when the font you’ve chosen becomes an invisible roadblock for your users? The problem is often subtle, but devastating: Flash of Invisible Text (FOIT).

If your users land on your site and stare at a blank screen for up to 3 seconds while waiting for your custom fonts to load, it’s a major problem. Not only does it hurt user experience, but it also drags down your Largest Contentful Paint (LCP) metric, which directly impacts SEO and Core Web Vitals. But don’t worry. The solution is simple, effective, and will make a world of difference.

alt text

What Is FOIT?

FOIT (Flash of Invisible Text) occurs when a browser delays painting text while waiting for a custom font to load. This means that while your layout is ready and your DOM is parsed, the actual text remains invisible until the font finishes loading. The text will appear only when the font is fully available, leading to a period of invisible content that can last several seconds, frustrating your users.

FOIT directly impacts LCP, one of the Core Web Vitals, which is essential for SEO. If your LCP takes too long, it signals poor user experience, which could harm your website’s search ranking. Google Lighthouse will flag this as a critical issue, and rightly so.

The Fix: font-display: swap

The solution to FOIT is surprisingly easy to implement. By using the font-display: swap property in your @font-face CSS rule, you instruct the browser to render text immediately with the fallback system font. Once your custom font has fully loaded, the browser will “swap” it in without requiring an additional paint cycle.

Here’s how you do it:

@font-face {
  font-family: "YourFont";
  src: url("yourfont.woff2") format("woff2");
  font-display: swap;
}

This simple line ensures that your content is visible right away, and your custom font will be swapped in as soon as it’s ready. The result: no more invisible text, no more FOIT.

The Impact of Ignoring This

Without font-display: swap, your website may wait for the custom font to load before painting any text, even if the layout is already complete. This waiting period can be detrimental for several reasons:

Delayed text causes significant delay in LCP and first paint. Since LCP represents the time it takes for the largest visible content element (usually the main heading or hero image) to be painted, invisible text causes a severe degradation of this metric.
Google uses LCP as a ranking factor. If it’s delayed, your SEO performance will be affected.
Staring at a blank screen for even a few seconds is frustrating. Users may abandon your site before they even see your content.
FOIT is directly linked to poor performance in Core Web Vitals, which are becoming more important for search rankings.

Best Practices

Here are some best practices that will not only help you tackle FOIT but also improve your overall font loading strategy:

To further optimize font loading, always preload your critical fonts. This will tell the browser to start fetching the font as soon as possible, reducing the time it takes to display the custom font once it’s ready.

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

Whenever possible, self-host your fonts instead of relying on third-party CDNs. This gives you more control over the font delivery process, and can prevent issues like font blocking due to network delays or CDN outages.
Always use WOFF2 format for web fonts. It’s the most compressed, efficient format, ensuring your fonts load as quickly as possible while still maintaining high quality. WOFF2 is supported by modern browsers and will reduce the amount of data your users need to download.
One of the hidden dangers of FOIT is the possibility of layout shifts when the font swaps in. This can negatively affect the user experience, especially when it’s the largest visible content element. To mitigate this, use the font-size-adjust property and ensure that your fallback fonts have similar metrics to your custom fonts. Additionally, use a sensible font-family-stack so that the fallback fonts are close in appearance to the custom ones.

body {
  font-family: "YourFont", Arial, sans-serif;
  font-size-adjust: 0.5; /*
Adjust to make fallback font size similar */
}

Testing and Validation

After implementing these changes, you should test the impact on your site’s performance. Tools like Google Lighthouse and WebPageTest are invaluable for measuring the before and after effects of font optimizations. Focus on LCP and First Contentful Paint (FCP), as they will be directly impacted by your font rendering strategy.

Conclusion

FOIT is an easily fixable problem, but its impact on web performance, SEO, and user experience is significant. By adding a simple font-display: swap rule to your custom fonts, preloading fonts, and self-hosting whenever possible, you’ll be able to fix the issue and drastically improve your site’s performance. The best part? This fix doesn’t require complicated setups or tools—just solid, fundamental CSS practices.

Further Resources:

This is just one example of how browser internals and performance optimizations can improve the overall quality of your website. For more tips, check out my e-book on browser rendering internals and other performance fixes that will make your website truly blazing fast.