Surely it has ever happened to you that, analyzing a URL in PageSpeed Insights, you have encountered this problem that appears in the suggestions for improvement. CSS is one of the most complicated parts when it comes to lighten the web and not “break” anything visually.
Like SEO agency in Barcelona, the WPO is one of the fields that we like to work, and that is why we have seen that this post may be interesting for many users (if you are interested in something more complete, you have a WPO guide to optimize WordPress speed step by step)
Font-display usually affects typography type resources with their different formats such as:
- .woff
- .woff2
- .otf
- .ttf
Sometimes these font files can take a long time to load and can be a problem for the site’s web performance.
But is it really necessary for this to load correctly? Well, the more files are optimized, the better the performance of the site.
Índice de contenidos
Locating the font-display problem
Once this introduction has been made, the most typical thing to do is to locate the problem. If we analyze a URL in Page Speed, we will usually find this problem (if we have it) at the bottom of the tool. Precisely in the Diagnostics section under the name “Make sure that the text remains visible while the web source is loading“:
This is how we will see the specific fonts where Google PageSpeed Insights advises us that we have to enter the font-display attribute so that the text is visible with more immediacy during loading.
To solve the problem, we can do it in different ways. And all this depends on how the calls are being made to these types of files on our website.
How to fix CSS font-display problem
From a CSS file that calls the source
In case these fonts are called from a CSS file with the “@font-face” attribute, we can use as indicated in the https://web.dev/font-display/ page the “swap” function for this font-display function. Attached is the image shown on the site:
With this, we are indicating that the browser loads the source immediately and we will solve the existing problem.
Load source with preload
Another simple way to do this is to make use of the loading of the source with the classic rel=”preload” where it is only necessary to indicate this attribute in the path of the file linked from the HTML of the web:
<link rel=”preload” href=”/assets/Pacifico-Bold.woff2″ as=”font” type=”font/woff2″ crossorigin>
Mainly, we have done the font-face example above, although this is another option that you can do according to the Web.dev site that brings you Page Speed Insights.
Add parameter to Google Fonts
As a last option, you can also test adding, within the HTML link of the font in question, the use of the “&display=swap” parameter to make the fonts load faster:
<link href=”https://fonts.googleapis.com/css?display=swap&family=Roboto:400,700&display=swap” rel=”stylesheet”>
As you can see, you have several options to solve the problem, it is just a matter of performing the different variables that Google offers you to solve the problem and you will improve that score in the tool.
Do you want to improve the performance of your website?
Expert agency in technical SEO
Questions about font-display CSS
Is it necessary to use all 3 typologies?
Using 1 of the recommended options should be more than enough to solve the problem.
Does it work with fonts.gstatic.com paths or is it only for fonts.googleapis.com?
In our experience, we have usually had to implement them under fonts.googleapis.com paths, but as they show from Page Speed, it should also work for fonts.gstatic.com paths.
Is there a plugin for font-display in WordPress?
Yes, you can install the Swap Google Fonts Display plugin that you can find in the WordPress search results.
You can find other WPO tips in our wordpress load time optimization post.
We hope this content will be helpful for your project. If you liked our content, do not hesitate to share because we appreciate it!
Sin asignación particular. Artículos redactados por el el equipo de Rodanet. Varias personas del equipo participan en crear los mejores artículos en cooperación y equipo 💪 Porque nos encanta trabajar en equipo 🔝
