top of page
Writer's pictureBrent D. Payne

Ensure text remains visible during webfont load

Your page may be temporarily hiding text while webfonts are loading, leading to a phenomenon known as a flash of invisible text (FOIT).


Why is this important?

Considering that web fonts can be fairly substantial in size, their load times can cause a delay in text visibility. During this 'font block period', certain browsers conceal the text, causing FOIT. This delay impedes the user's ability to interact with your content promptly and may result in unexpected layout changes, which can be disruptive to the user experience.


What does the Optimization check?

The Optimization will activate if any internal page employs font resources that are susceptible to causing FOIT.


How do you resolve this issue?

To mitigate the issue of invisible text, the immediate display of text using a fallback system font is an advised strategy. This might result in a 'flash of unstyled text' (FOUT), which could still affect the user experience negatively.


Refer to the discussion on tactics to balance FOIT and FOUT from the article "Font loading strategy: The acceptable FOIT".


As a part of enhancing the rendering process, Google Chrome starting from version 83 has tackled the layout shift associated with the loading of optional fonts.


In progressive browsers, the synergy of the <link rel="preload"> tag and 'font-display: optional' can be used to prevent layout shifts due to font loading.

To achieve optimal results, this process requires a collaborative effort between developers and diagnostic tools, such as Lighthouse, to fine-tune webfont loading tactics.


Further Reading

<style>pre {  font-family: 'Courier New', monospace;  background-color: #f4f4f4;  padding: 10px;  border: 1px solid #ddd;  overflow: auto;}</style>

9 views
bottom of page