@font-face block from all current stylesheets on the page, find the
display property, and check if it’s set to an
The Cumulative Layout Shift (CLS) is a metric that quantifies how often users experience sudden shifts in page content. When a web font is downloaded, the size of the contained element changes, which causes layout shifts. This happens when the system font and the web font have different font height or paragraph length. To prevent layout shifts, we recommend using
This directive, which is located in your
@font-face declaration, instructs the browser to fall back to the system font in case the web font is not accessible at the time that text is rendered (plus 100 ms). This indicates that subsequent page loads should render using the web font, as it will have been downloaded and made accessible in cache, but uncached page loads may still use the fallback font. There are other choices, as seen in the illustration below:
- block – gives the font face a short block period (3s is recommended in most cases) and an infinite swap period.
- swap – gives the font face an extremely small block period (100ms or less is recommended in most cases) and an infinite swap period.
- fallback – gives the font face an extremely small block period (100ms or less is recommended in most cases) and a short swap period (3s is recommended in most cases).
- optional – if the font can be loaded
immediately(such that it’s available to be used for the
first paintof the text, the font is used. Otherwise, the font is treated as if its block period and swap period both expired before it finished loading. If the font is not used due to this, the user agent may choose to abort the font download or download it with a very low priority. If the user agent believes it would be useful for the user, it may avoid even starting the font download and proceed immediately to using a fallback font.
How to fix it
When using Google Fonts, ensure option
displayis set to
Then in your CSS, you do not need to use the
@font-face, you simply add the
font-familyto your class/tag, like so:
@font-facein CSS simply add
font-display: optional;to your
Best Practice, Performance, SiteLint