In this article, we will take a look at how font changes can impact Core Web Vitals. As well as looking at some techniques which can help ensure that text remains visible during the web font load.
How does invisible text hurt your Core Web Vitals?
Many websites use web fonts to give their design a custom feel. But unoptimized fonts can lead to a Flash of Invisible Text (FOIT), as a the browser waits for the web font to download before the text can be displayed.
If the page element that's responsible for the Largest Contentful Paint (LCP) is a text element like a heading or paragraph, invisible text can negatively impact the LCP score.
Since invisible text isn’t recognized as the LCP element, the LCP value is only recorded once the web font loads and becomes visible to users. A page that initially displays invisible text can result in a poor user experience.
System fonts vs Web fonts
System fonts are already installed on a device. Fonts such as Ariel, Helvetica and Times New Roman are system fonts. These fonts provide a big advantage in terms of web performance as no downloads are necessary. The font is installed on the device and ready to be displayed.
System fonts that are available across most devices and browsers are called web safe fonts. Web safe fonts ensure consistent text rendering across different browsers and platforms without having to wait for custom fonts to load.
The downside to using system fonts is the lack of variety. If you want a custom look for your website, you would likely opt to use a web font.
These are custom fonts downloaded from the internet. After being identified in a page’s stylesheet, the browser sends a request to download the font file. This extra step adds a delay in the styling of the page, causing text to be invisible during the initial stages of the page rendering.
Performance impact of web fonts
Sometimes font files can take a long time to load and can be a problem for the site’s web performance. Looking at this request waterfall, we can see that all render-blocking requests are complete. However, the button text does not appear until the web font request has finished.
For this page, the LCP element is an <h1> text. Using a web font instead of a system font has led to an increase in the LCP value. With a system font, the text would have been displayed immediately after the HTML was parsed.
How to detect invisible web font text with Lighthouse
Google's Lighthouse website analysis tool can identify invisible text on your website. Test your website on PageSpeed Insights or with DebugBear's speed test.
Look for the Ensure text remains visible during webfont load audit in the performance diagnostics. Google recommends using the font-display property to avoid invisible text.
Configuring font-display on Google Fonts
Google Fonts are a popular choice for web fonts and Google has introduced a solution for developers to prevent invisible text. When copying the embed link for a font, the URL includes &display=swap. This ensures that the font-display: swap property is applied to the font.
How to ensure text remains visible using font-display: swap
The font-display: swap property improves the user experience by controlling how web fonts render. This property displays text using a fallback font while the custom web font is being loaded. The fallback font is then replaced once the web font loads. This optimization ensures that there is no invisible text on the page and visitors are able to read the text before the web font displays.
Below we can see an example where the fallback font appears on the page. Allowing the visitor to begin reading the content before the web font loads and is applied. This is a great execution of font-display: swap as no layout shifts occur disrupting the visitors experience.
Here are some optimizations to consider when using a webfont:
- Specifying a fallback font which has similar font size and dimensions to avoid layout shifts.
- Preloading the font, hinting the browser to load the font as soon as possible.
- If possible, reduce the web font file size to speed up loading.
How to monitor Core Web Vitals for your website
DebugBear is a monitoring tool that helps you keep track of your Core Web Vital scores with lab tests and Real User Monitoring. View request waterfalls and test optimizations for your website with automated recommendations and experiments.
If you find that a lot of your LCP elements are headings or text content, you can filter RUM data by LCP type for closer analysis. As well as inspecting LCP data for individual page visits.
Start your free 14-day trial and start optimizing today.
Monitor Page Speed & Core Web Vitals
DebugBear monitoring includes:
- In-depth Page Speed Reports
- Automated Recommendations
- Real User Analytics Data