Font usage is prevalent across most web pages and often includes errors. Many of these errors negatively impact the web performance budget. This article aims to provide information about web font usage and help improve your web performance.
As shown in the hierarchy applied when rendering any web page, font elements can delay the rendering of other elements until they are loaded. Properly managing this delay is important for both Cumulative Layout Shift (CLS) and user perception.
The Problem with Font Loading
Until the page's fonts are loaded, the visibility of fonts during the HTML and CSS rendering process varies from browser to browser. Here's a summary of how different browsers handle this situation:
| Browser | Default behavior if font is not ready… |
|---|---|
| Edge | Uses a system font until font is ready. Swaps out font. |
| Chrome | Will hide text for up to 3 seconds. If text is still not ready, uses a system font until font is ready. Swaps out font. |
| Firefox | Will hide text for up to 3 seconds. If text is still not ready, uses a system font until font is ready. Swaps out font. |
| Safari | Hides text until font is ready. |
To address this issue without relying on browser behavior, the font-display parameter was introduced. Currently, 92% of browsers support the font-display parameter.
What Does Font-Display Do?
During the page loading process, the appearance of fonts can vary until they are fully loaded, depending on the browser. For example, some versions of the Safari browser hide the text until the font is loaded. The font-display: swap CSS parameter standardizes this behavior by displaying the text using a system font until the font files are loaded. Once the fonts are loaded, the system font is swapped out for the intended font. Here's an example usage:
@font-face {
font-family: 'Awesome Font';
font-style: normal;
font-weight: 400;
font-display: swap;
}Preloading Fonts
Using <link rel="preload"> to load fonts before the critical render path can prevent gaps while fonts are loading.
BONUS: Industry Approach to Font Usage
According to SimilarTech data, let's take a look at an important trend and snapshot of the internet world. The first graph below shows font usage on the top 10,000 pages, and the second graph shows font usage on the top 100,000 sites. Let's examine these graphs first:
There is a 5% difference in the usage of Google Font and Font Awesome between the top 10,000 sites and the top 100,000 sites. This tells us that the top 10,000 sites have optimized their font usage. We recommend examining this as a noteworthy topic. Consider how you can implement web fonts with your own solutions.
BONUS 2: Usage Statistics of Google Font and Font Awesome
Referring to the first bonus, we suggest examining the two graphs showing the numerical extent of the most used font libraries. The number of unique domains here exceeds millions, and these millions represent your SEO competitors. Using these libraries better and more optimally than others can help you stand out.
By following these tips and optimizing your font usage, you can significantly improve your web performance and user experience.
