Font-display CSS feature.

Question

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?

Aman Gupta · Answer

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.

Sachin Singh · Answer

@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.