Use font-display swap and make sure text stays visible while loading
Posted: Mon Dec 09, 2024 8:59 am
Web Performance
Use font-display swap and make sure text stays visible while loading
There is a close relationship between the loading speed of a site and the type of fonts used and I want to talk about it in this article.
To do so, I will tell you about my speech at the “ Turin Web Performance Group ”. I was invited to Turin to share my experience with other experts and just like at the event, I will start with a question:
“ Do we really need external fonts? ”
Before giving you an answer, we will look in detail atsenegal phone numbers theone Numbypes of fonts and I will illustrate tools and strategies to optimize the rendering path that leads to their display.
Font types - Mirko Ciesco
Table of Contents
System fonts
Web fonts
Why Refine the Critical Rendering Path
Problems loading a Web Font
FOUT
FOOT
How to improve font loading
Use JavaScript libraries
Enter Link Preload and DNS Prefetch
Use the Font-display: swap CSS rule
Make sure text remains visible while web fonts load
Fonts and speed
Conclusions
System fonts
System fonts are predefined fonts that are present in most operating systems.
The Open Source CSS frameworks that I use the most when developing a website are UIkit and Bootstrap . Both offer alternative system fonts that can be displayed on most system software installed on different devices.
Here are the font families used by UIkit:
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “HelveticaNeue”, Arial, sans-serif;
The solution proposed by Bootstrap instead:
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “HelveticaNeue”, Arial, sans-serif, “Apple Color Emoji”, “SegoeUI Emoji”, “SegoeUI Symbol”, “NotoColor Emoji”;
These characters have no impact on the loading speed of the site.
Web fonts
Web fonts are not present in the default operating system. These characters can be downloaded directly from the web, then saved in a folder on the site or by inserting a link to external libraries such as Google Fonts .
Use font-display swap and make sure text stays visible while loading
There is a close relationship between the loading speed of a site and the type of fonts used and I want to talk about it in this article.
To do so, I will tell you about my speech at the “ Turin Web Performance Group ”. I was invited to Turin to share my experience with other experts and just like at the event, I will start with a question:
“ Do we really need external fonts? ”
Before giving you an answer, we will look in detail atsenegal phone numbers theone Numbypes of fonts and I will illustrate tools and strategies to optimize the rendering path that leads to their display.
Font types - Mirko Ciesco
Table of Contents
System fonts
Web fonts
Why Refine the Critical Rendering Path
Problems loading a Web Font
FOUT
FOOT
How to improve font loading
Use JavaScript libraries
Enter Link Preload and DNS Prefetch
Use the Font-display: swap CSS rule
Make sure text remains visible while web fonts load
Fonts and speed
Conclusions
System fonts
System fonts are predefined fonts that are present in most operating systems.
The Open Source CSS frameworks that I use the most when developing a website are UIkit and Bootstrap . Both offer alternative system fonts that can be displayed on most system software installed on different devices.
Here are the font families used by UIkit:
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “HelveticaNeue”, Arial, sans-serif;
The solution proposed by Bootstrap instead:
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “HelveticaNeue”, Arial, sans-serif, “Apple Color Emoji”, “SegoeUI Emoji”, “SegoeUI Symbol”, “NotoColor Emoji”;
These characters have no impact on the loading speed of the site.
Web fonts
Web fonts are not present in the default operating system. These characters can be downloaded directly from the web, then saved in a folder on the site or by inserting a link to external libraries such as Google Fonts .