The CSS display mode (SWAP) of your website's font has a direct impact on the loading time of your pages, and therefore, on your SEO. Bonus: how to integrate it on your Webflow website.
The CSS display mode of your web font has a direct impact on the loading time of your site and therefore on your SEO. So how do you choose and implement the best practice, recommended by Google, to optimise the loading time of your page?
How to deal with this Google Core Vitals (SEO) error?
Have you ever done a Google Core Vitals audit with the Google Lighthouse tool and had this error?
"Ensure text remains visible during webfont load"
Translated, this means that Google recommends that you use a particular CSS function on the text displayed on your site. Why? So that the text content on your site remains visible to the user while the fonts on your web page are loading. It may take a few milliseconds, but Google and your users are demanding.
To correct this error, there is a very simple optimization. You need to add a CSS function to your web font. The function is :
- font-display: SWAP;
What are the different functions of web fonts?
By default, there are several font-display styles when it comes to display fonts on a website:
- font-display: auto;
- font-display: block;
- font-display: swap;
- font-display: fallback;
- font-display: optional;
To find out more about the role of each, click here. The Mozilla dev site explains them very well.
The best (CSS) font-display to optimise the loading of your site
Google is formal, its preferred display is the SWAP display. It allows you to put a "default" font to ensure the reading of your site's content and to pass the loading of the CSS style of your font (example: comfortaa) in a second time.
Example on the micro time of loading the policy on our site 👇
This CSS feature is simple to implement and will improve the performance of your website pages.
How to change the font function on Webflow?
Webflow native fonts and fonts downloaded from the Google Fonts section in the Webflow interface do not allow you to add SWAP mode. However, there is a quick technique to access it:
Webflow allows you to adjust the CSS font-display functionality on imported fonts from the "custom fonts" section.
- Download a font
- Import the font into "custom fonts
- Choose Font Display: Swap
- Click on Upload Font Files
⚠️ If you already had a font that affected your elements, remember to "reset" its CSS attributes to re-assign your "new" font.
Now you know how to improve the loading speed of your pages, thanks to a CSS attribute that can be managed quickly.
