How to Ensure Text Remains Visible During Webfont Load?

Webfonts are the major thing when you want to spice up your blog or website with an elegant and unique design, but that too comes with a cost – a burden on page speed factors.

That’s why we need to ensure text remains visible during webfont load so it doesn’t flash or go blank for a while during the webfont load.

So how can we achieve the visibility of texts while the font is 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 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 – Gives the font face a short block period and an infinite swap period.
  • Swap – Gives the font face an extremely small block period and an infinite swap period.
  • Fallback – Gives the font face an extremely small block period and a short swap period.
  • Optional – Gives 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.

Published by AtulHost

Hi, I'm Atul Kumar Pandey; also known as AtulHost on the web. A blogger by passion and profession with the objective of sharing fresh and real contents in the business and technical topics; from contents to useful resources it's all here.

Join the discussion!

Your email address will not be published. Required fields are marked *