Ensure text remains visible during webfont load

Web fonts are the major things now. Specially when you want to spice up your site with an elegant and unique design, but that come with a cost – a burden on page speed. That is why we need to ensure text remains visible during web font load, so it doesn’t flash or go blank for a while the web fonts load in the background.

So, how can we attain the visibility of texts while the web fonts are loading?

You can use the descriptor font-display in the @font-face that will determine how a font face will be displayed based on whether and when it is downloaded and ready to use.

You can use one from the following syntax:

[ auto | block | swap | fallback | optional ]

Every syntax will offer a block as well as swap period except.

• auto, the font display strategy is defined by the user agent.
• block, the font face a short block period and an infinite swap period.
• swap, the font face an extremely-small block period and an infinite swap period.
• fallback, the font face an extremely-small block period and a short swap period.
• optional, the font face an extremely-small block period and no swap period.

What we’re interested in is block, swap, and fallback syntax. The use of these syntaxes will ensure that text remains visible during the webfont load.

We recommend using “swap” over “block” or “fallback” because swap syntax will offer you an infinite swap period, which means no matter how slow the web fonts are loading it will swap back to the web fonts as soon as the web fonts are ready to be shown. But this feature will only work if you have added a backup (web-safe fonts) in your style sheet. If there are no web-safe backup fonts in your style sheet along with custom font, better add it now.

body {
    font-family: "CustomFontName",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

In the above example, I tried my best to include websafe fonts of every possible system including Mac, Windows, Android, Linux, and any other known Operating System.

On the web, Google fonts and Self Hosted fonts are common methods. So, considering all users I have the use case for both methods.

Ensure text remains visible for Google fonts.

If you are using Google fonts, simple ensure the url ends with a “&display=swap” parameter.

https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap

Google allows you to change the swap value with block and fallback if you want to.

https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=block
https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=fallback

Ensure text remains visible for self-hosted fonts.

If you are using your own self hosted custom fonts, then here is an example of using a font-display descriptor in @font-face, you can replace swap with a block or fallback if you want to.

@font-face {
    font-display: swap;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url(roboto-regular.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Do try out this and let us know any improvement in your page speed score.