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

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注