3. Font delivery
Quicker font delivery results in faster text rendering. Furthermore, if a font is provided early enough, it can assist to prevent layout changes caused by font swapping.
a. Using self-hosted fonts
On paper, using a self-hosted font should provide superior speed because it eliminates the need for a third-party connection setup. In practice, however, the speed differences between these two choices are less clear: for example, the Web Almanac
discovered that sites using third-party fonts rendered quicker than fonts using first-party fonts.
If you’re thinking about utilizing self-hosted fonts, make sure your site is using a Content Delivery Network (CDN) and HTTP/2. It is far less probable that self-hosted fonts will perform better if these technologies are not used.
It is suggested that if you use a self-hosted font, you additionally apply some of the font file optimizations that third-party font suppliers normally offer automatically, such as font subsetting and WOFF2 compression. The amount of effort necessary to implement these optimizations will vary depending on the languages supported by your site. Be careful that optimizing fonts for CJK languages
might be extremely difficult.
WOFF2: WOFF2 is the most recent contemporary font, with the broadest browser compatibility and the greatest compression. WOFF2 compresses 30 percent better than WOFF since it employs Brotli.
b. Use fewer web fonts
The quickest font to deliver is one that was not requested in the first place. System fonts and variable fonts are two approaches to reducing the number of web fonts needed on your site.
A system typeface is the default font used by a user’s device’s user interface. System fonts are generally different depending on the operating system and version. The font does not need to be downloaded because it is already installed. System fonts are especially useful for body text.
To utilize the system font in your CSS, use the font-family system-ui
The concept behind variable fonts
is that a single variable font can be used to replace numerous font files. Variable fonts function by defining a “default” font style and supplying “axes” for manipulating the font. A variable font with a Weight
axis, for example, might be used to implement lettering that would previously need different fonts for light, regular, bold, and extra bold.
Switching to variable fonts will not help everyone. Because variable fonts have several styles, their file sizes are generally greater than those of individual non-variable fonts that only contain one style. Sites that utilize (and need to employ) a range of font styles and weights will benefit the most from adopting variable fonts.