Using a font that is not built into operating systems can cause layout shifts and significantly decrease user experience.
Luckily - it's something rather easy to fix!
🧵 Let's break this problem down and see how to solve it!
#webperf #javascript
Luckily - it's something rather easy to fix!
🧵 Let's break this problem down and see how to solve it!
#webperf #javascript
When you use a font that is not available in the operating system the browser has to download it.
This leads to one of two ways how it's handling the time between the page load and the font load:
- Flash of Invisible Text (FOIC)
- Flash of Unstyled Text (FOUC)
This leads to one of two ways how it's handling the time between the page load and the font load:
- Flash of Invisible Text (FOIC)
- Flash of Unstyled Text (FOUC)
Flash of Invisible Text (FOIT)
As the name suggests, FOIT happens when the browser waits for the desired font to be downloaded until displaying any text.
This method significantly decreases user experience when the network is slow and generally should be avoided.
As the name suggests, FOIT happens when the browser waits for the desired font to be downloaded until displaying any text.
This method significantly decreases user experience when the network is slow and generally should be avoided.
Instead its much better to display fallback font that is already available immediately and swap it with the desired one once it is available.
This delivers a much better experience because users can see the text as soon as the page loads.
This delivers a much better experience because users can see the text as soon as the page loads.
To prevent FOIT and fallback to system fonts, you should use a "font-display" property.
It tells the browser how to handle the time between the page load and font load if the desired font is unavailable.
The recommended "font-display" value for best performance is "optional".
It tells the browser how to handle the time between the page load and font load if the desired font is unavailable.
The recommended "font-display" value for best performance is "optional".
This is not solving the whole problem, though!
In many (almost every) cases, the fallback font occupies a different amount of space than the desired font.
This is exactly what causes FOUT and increases your Cumulative Layout Shift, one of the key performance metrics!
In many (almost every) cases, the fallback font occupies a different amount of space than the desired font.
This is exactly what causes FOUT and increases your Cumulative Layout Shift, one of the key performance metrics!
To deal with FOUT we have to ensure that the fallback font occupies exactly the same space as the desired font. This will require us to play with a few CSS properties.
Doing it with *just* CSS can be a nightmare tho.
Doing it with *just* CSS can be a nightmare tho.
A tool called Font Matcher from Google engineer Monica Dinculescucan can save you hours of unpleasant work, tears, and meltdowns.
meowni.ca/font-style-mat…
meowni.ca/font-style-mat…
It can get even easier!
You can automate the whole process of generating the font fallback and required CSS classes by using the amazing package from @danielcroe called Fontaine
github.com/unjs/fontaine
You can automate the whole process of generating the font fallback and required CSS classes by using the amazing package from @danielcroe called Fontaine
github.com/unjs/fontaine
And if you're using @nuxtjs there is a Nuxt module in the making:
github.com/danielroe/nuxt…
If you end up using the package don't forget to say something nice to Daniel (or sponsor him)!
github.com/danielroe/nuxt…
If you end up using the package don't forget to say something nice to Daniel (or sponsor him)!
• • •
Missing some Tweet in this thread? You can try to
force a refresh
