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://staging.wpastra.com/wp-content/themes/astra/assets/fonts/astra.woff) format("woff"),url( 
    https://staging.wpastra.com/wp-content/themes/astra/assets/fonts/astra.ttf) format("truetype"),url( https://staging.wpastra.com/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