Optimizing Fonts Loading
Fixes: CLS, TTI
The better strategy would be to keep the fonts minimum and have them fallback to system fonts. We encourage you to follow the Fonts best practices. Making use of local fonts or system fonts as much as possible would help in faster fonts rendering.
We can do following to make fonts load faster:
- Use self hosted fonts
- Load system fonts as fallback and use font-display property that improves performance such as font-display: optional; or font-display: fallback;.
- Preload external font sources such as Google fonts. Example of preloading fonts – https://web.dev/codelab-preload-web-fonts/
The font loading strategies will be different for the sites based on how many fonts to be used, how important is the font loaded vs similar looking fonts loading on the page.
For example:
If the site is loading 2-3 fonts out of which the primary font is Poppins, and secondary fonts are Open Sans, and Tahoma. You can figure which font is critical to show above the fold. So the Primary fonts can use font-display: fallback; or font-display: swap; based on your judgment call. The secondary font can use font-display: fallback; or font-display: optional; so that there is 3 seconds or zero swapping time respectively. Here if Poppins is supposed to be loaded above the fold, we can use the following font-face properties.
| @font-face { font-family: Poppins; font-display: fallback; font-style: normal; font-weight: 700; src: local(“Poppins Bold”), local(“Poppins-Bold”), resolve(‘poppins-v5-latin-700.woff2’) format(“woff2”), resolve(‘poppins-v5-latin-700.woff’) format(“woff”); } |
Normally we’d use font-display: swap;, so the text gets the Poppins font when it is loaded by the browser and ready, however, it waits for the font to load indefinitely, which is unnecessary when you have options to load the system or local fonts instead of waiting.
Using font-display: optional; and font-display: fallback; will only block rendering for 100ms which is the block period of the font and then show the local font available to display. The font-display:fallback; will additionally wait for 3 seconds to swap the requested font if it is able to load it in 3 seconds else it will do nothing, where as font-display: block; and font-display: swap; will wait indefinitely for the requested font.
More on the font-display properties here – https://web.dev/font-display/