Font-display CSS feature.

Sachin Singh

Google page speed insights , suggesting me

"Ensure text remains visible during webfonts load" .Leverage the font-display CSS feature to ensure text is user-visible while webfonts are loading.

I am using font awesome. (…fonts/fontawesome-webfont.woff2?v=4.7.0)

Please tell what exactly is Font-display CSS feature?

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh6y ago
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-display: swap;
font-style: normal;
src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2");
}

@Aman you are right , after learning about CSS 3 fonts rule and font-display , i modified the css as above and it worked.
Aman Gupta6y ago
CSS font-display allows you to control how web fonts are swapped with system fonts while/after they load. PageSpeed is telling you that you're loading a large amount of font data using @font-face so there will be lag (up to several seconds) where your content is blank while waiting for the fonts to load. Consider a structure like this: @font-face { font-family: "Open Sans Regular"; font-style: normal; src: url("fonts/OpenSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; } p { font-family: "Open Sans Regular", Helvetica, Arial, Sans-Serif; } font-display:swap; means when the page renders, all paragraph tags will use the FIRST AVAILABLE fallback font until Open Sans Regular has loaded.