Two-three years ago, the following post might have been of interest at most to an extremely jaded front-end worker, but in no way to an SEOwoman. But times are changing, and in the pursuit of a better score in performance tests, you have to expand your know-how with new tricks. Especially those that require only one line of code.
That’s why today I decided to write a few words about a magical invention of the CSS language: font-display.
Spis treści
What is font-display?
Font-display tells the browser of the person who visits our site what to do if the font we specified fails to download, or if it takes longer to download than it should.
What does font-display have to do with SEO?
While a few years ago I used to and still do flinch when hearing that “content is king,” today I myself believe that “speed is the new queen.” The ability to control the behavior of the browser allows us in this aspect to squeeze the maximum out of the loading of the site where possible, and to be reasonable where speed is not the only factor.
In short: font-display = faster loading = better SEO.
How do you go about it?
Font-display is an @font-face descriptor. It’s just one line of code.
Using the example of the Arvo font, borrowed from Google.
@font-face {
font-family: 'Arvo';
font-display: auto;
src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}
Font-display can have one of the values: auto, block, swap, fallback or optional.
Before explaining the individual values, we need to familiarize ourselves with 2 more concepts: font block period and font swap period.
Font block period
In short, it is that moment of loading the font, where the font has not yet managed to download, and the browser instead displays an invisible filler (that is, it has reserved space for the text, but does not display it).
Font swap period
It is that moment of font loading when, after a possible font loading failure, the browser displays a replacement font (e.g., defined in font-face, or simply the browser’s default font). During the swap period, the browser is still waiting for the correct font to load.
Possible font-face values
I describe the values in non-accidental order. I start with the ones to use if you care about a particular font and less about speed, gradually moving to the opposite situation, where speed comes first.
font-display: block
- block period approx. 3 s.: if the font has not loaded, a blank filler is displayed first (in most browsers it takes about 3 seconds)
- infinite swap period: then the browser displays the replacement font all the while waiting for the right one to download. If it finally succeeds, it substitutes the replacement font for the correct one.
When to use?
The least efficient option, with the worst impact on optimization. It is worth using only in places where the use of a particular font is absolutely necessary.
font-display: auto
Setting font-display to auto causes the font loading to take place as the browser does by default. Most browsers, on the other hand, load fonts in a manner similar to the above font-display: block command.
When to use?
Do not use 🙂 Let’s use the possibilities that CSS gives us.
font-display: swap
- no block period
- infinite swap period: the browser immediately displays the text in a substitute font, and then waits all the time to download the right one. If successful, it substitutes the font with the correct one.
When to use?
In terms of optimization, as poor a solution as block, better insofar as the text is immediately visible. If you use CSS and custom fonts to display your logo, swap is a good option. Use where both content and appearance are important.
font-display: fallback
- ultra-short block period: if the font does not load correctly the text is only hidden for a fraction of a second
- approx. 3 s. swap period: the text is almost immediately displayed with a replacement font, and the browser waits for the correct font for only approx. 3 seconds. If the correct font does not load after this time, the browser makes no more attempts.
When to use?
Fallback is a good solution for the main text, especially content pages, where you want to encourage the user to read quickly and don’t want to distract them with later font changes while reading.
font-display: optional
- ultra-short block period: if the font does not load correctly the text is only hidden for a fraction of a second
- no swap period: the text is displayed with a substitute font, the browser no longer tries to download the correct font.
- in addition, optional gives the browser the ability to forgo loading the custom font at all if the Internet connection is slow or resources are limited
When to use?
By far the best option in terms of optimization, especially for users with slow Internet connections. To be implemented wherever the appearance of the font is a secondary concern.
Which font-display value to choose?
The answer is easy if you know what you want to achieve. I have described what will happen to your fonts for each of these values – choose for yourself what is most important to you.
If you want to gain precious milliseconds and the issue of aesthetics is secondary to you, don’t think long and use optional. If, on the other hand, for example. Your site is a portfolio that needs to look, choose block.
