“ Do we really need external fonts? ”
Before giving you an answer, we will look in detail at the types 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
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 australia email list 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 fonts 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 .
Example of classic Google font loading: