Why font-display property is added to Astra?

Why font-display property is added to Astra?

With Astra Version 1.8.3 and above, improvement is added with property font-display: fallback; for loading Astra Font.

@font-face {
    font-family: "Astra";
    src: url( https://optimization.bsf.io/wp-content/themes/astra/assets/fonts/astra.woff) format("woff"),url( 
    https://optimization.bsf.io/wp-content/themes/astra/assets/fonts/astra.ttf) format("truetype"),url( https://optimization.bsf.io/wp-content/themes/astra/assets/fonts/astra.svg#astra) format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

While loading a website, there is a very short period of time (100ms according to Google) for which text will not display in a font applied to it. That means custom fonts ( Astra fonts ) will be invisible for a small period of time. Once your website is fully loaded text will display with a font set from the customizer.

For this short period of time browsers have introduced new property font-display which adds a fallback font until custom font is loaded.

For more information, please refer to the doc below –
https://developers.google.com/web/updates/2016/02/font-display

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

On this page

Take the First Step Toward Success Now.

You’re backed by an amazing team and a risk-free money-back guarantee!

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

This field is required.

REWIND

YEAR IN REVIEW

Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form