Unable to solve Ensure text remains visible during webfont load

Asked Sep 23 '19 at 12:51

Active May 22 '22 at 13:48

Viewed 2,089 times

I have tested my code with LightHouse on chrome and I am unable to solve the Error -

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

I have introduced this css code in style.css ,style.scss inside assets , index.html and every .css file of component in angular7 template.

My css code is -

@font-face {
    font-family: "Open Sans Regular";
    font-style: normal;
    src: url("../font/opensans-regular-webfont.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
  }

Whichever place I kept the css, I am unable to solve the error.

asked Sep 23 '19 at 12:51

Techdive

did you try changing the font-display property? – Aslam Sep 24 '19 at 09:11
Ok. I'll try. Thanks – Techdive Sep 24 '19 at 11:45
@Aslam, I tried changing the font-display property will all the possible options. Still to no avail. Do you have any other suggestion ? – Techdive Sep 25 '19 at 05:15
How about loading the font in the head of html instead of the css file? – Aslam Sep 25 '19 at 05:27
E.g The way you load google fonts. – Aslam Sep 25 '19 at 05:27
Yes I have integrated the @font-face in style tag of index.html – Techdive Sep 25 '19 at 05:58
I mean importing the font via link rel=stylesheet url. – Aslam Sep 25 '19 at 06:14
Please share a link. This cannot be solved like this. – Mr. Hugo Sep 25 '19 at 13:55

Unable to solve Ensure text remains visible during webfont load

0 Answers0