Ensure text remains visible during webfont load

[andyfurniss4]

I know there are a couple of other issues related to this but I've read through them and they have not helped me so I am posting a new issue to see if I can get help making progress or to discover whether this is a bug not not.

I am receiving an "Ensure text remains visible during webfont load" message when running Lighthouse:

I have added the font-display CSS property and set it to "swap" (I've also tried "fallback") but this seems to make no difference. Here is my font CSS:

@font-face {
  font-family: 'Malaga OT Reg';
  font-display: swap;
  src: url('./MalagaOT-Reg.eot');
  src: url('./MalagaOT-Reg.eot?#iefix') format('embedded-opentype'),
    url('./MalagaOT-Reg.woff2') format('woff2'), url('./MalagaOT-Reg.woff') format('woff'),
    url('./MalagaOT-Reg.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-300.eot');
  src: url('./MuseoSansRounded-300.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-300.woff2') format('woff2'),
    url('./MuseoSansRounded-300.woff') format('woff'),
    url('./MuseoSansRounded-300.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-900.eot');
  src: url('./MuseoSansRounded-900.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-900.woff2') format('woff2'),
    url('./MuseoSansRounded-900.woff') format('woff'),
    url('./MuseoSansRounded-900.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-700.eot');
  src: url('./MuseoSansRounded-700.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-700.woff2') format('woff2'),
    url('./MuseoSansRounded-700.woff') format('woff'),
    url('./MuseoSansRounded-700.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-100.eot');
  src: url('./MuseoSansRounded-100.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-100.woff2') format('woff2'),
    url('./MuseoSansRounded-100.woff') format('woff'),
    url('./MuseoSansRounded-100.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Museo Sans Rounded';
  font-display: swap;
  src: url('./MuseoSansRounded-500.eot');
  src: url('./MuseoSansRounded-500.eot?#iefix') format('embedded-opentype'),
    url('./MuseoSansRounded-500.woff2') format('woff2'),
    url('./MuseoSansRounded-500.woff') format('woff'),
    url('./MuseoSansRounded-500.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo-700.eot');
  src: url('./Museo-700.eot?#iefix') format('embedded-opentype'),
    url('./Museo-700.woff2') format('woff2'), url('./Museo-700.woff') format('woff'),
    url('./Museo-700.ttf') format('truetype'), url('./Museo-700.svg#Museo-700') format('svg');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo500-Regular.eot');
  src: url('./Museo500-Regular.eot?#iefix') format('embedded-opentype'),
    url('./Museo500-Regular.woff2') format('woff2'), url('./Museo500-Regular.woff') format('woff'),
    url('./Museo500-Regular.ttf') format('truetype'),
    url('./Museo500-Regular.svg#Museo500-Regular') format('svg');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Museo';
  font-display: swap;
  src: url('./Museo900-Regular.eot');
  src: url('./Museo900-Regular.eot?#iefix') format('embedded-opentype'),
    url('./Museo900-Regular.woff2') format('woff2'), url('./Museo900-Regular.woff') format('woff'),
    url('./Museo900-Regular.ttf') format('truetype'),
    url('./Museo900-Regular.svg#Museo900-Regular') format('svg');
  font-weight: 900;
  font-style: normal;
}

This CSS is contained in it's own file and pre-loaded in my <head> tag.

<link href="%PUBLIC_URL%/fonts/fonts.css" rel="preload stylesheet" as="style" />
    <link href="%PUBLIC_URL%/fonts/MalagaOT-Reg.woff2" rel="preload" crossorigin="anonymous" as="font" />
    <link href="%PUBLIC_URL%/fonts/MuseoSansRounded-300.woff2" rel="preload" crossorigin="anonymous" as="font" />
    <link href="%PUBLIC_URL%/fonts/MuseoSansRounded-900.woff2" rel="preload" crossorigin="anonymous" as="font" />
    <link href="%PUBLIC_URL%/fonts/MuseoSansRounded-700.woff2" rel="preload" crossorigin="anonymous" as="font" />
    <link href="%PUBLIC_URL%/fonts/MuseoSansRounded-100.woff2" rel="preload" crossorigin="anonymous" as="font" />
    <link href="%PUBLIC_URL%/fonts/MuseoSansRounded-500.woff2" rel="preload" crossorigin="anonymous" as="font" />
    <link href="%PUBLIC_URL%/fonts/Museo-700.woff2" rel="preload" crossorigin="anonymous" as="font" />
    <link href="%PUBLIC_URL%/fonts/Museo500-Regular.woff2" rel="preload" crossorigin="anonymous" as="font" />
    <link href="%PUBLIC_URL%/fonts/Museo900-Regular.woff2" rel="preload" crossorigin="anonymous" as="font" />

I am also preloading the woff2 files because Lighthouse was previously giving me a message telling me to do this:

Removing the preload of the fonts does not make the "Ensure text remains visible during webfont load" issue go away though so I don't think it's related.

For a while, Google PageSpeed was reporting this issue but the Lighthouse integrated into Chrome dev tools was not so I just assumed it was a bug with the GPS version but I've just updated Chrome and now I'm getting it in the Dev Tools too!

Any help would be appreciated.

[patrickhulce]

Thanks very much for filing @andyfurniss4 I can confirm this is a bug!

The carriage returns in your stylesheet were throwing our parsing. Ref #7712

[andyfurniss4]

Excellent! Glad it's not something I'm doing wrong :)

Thanks for diagnosing and sorting so soon.

[patrickhulce]

Fixed by #7712

[westonruter]

@patrickhulce Has this been rolled out to tools like Page Speed Insights yet?

Regardless, I'm seeing some similar behavior still, but even when there are no linebreaks in the CSS at all.

Given my AMP-first site https://weston.ruter.net/ which has a single minified style[amp-custom] with some Google Fonts inline like:

@font-face{font-display:swap;font-family:"Libre Franklin";font-style:italic;font-weight:300;src:local("Libre Franklin Light Italic"),local("LibreFranklin-LightItalic"),url("https://fonts.gstatic.com/s/librefranklin/v3/jizGREVItHgc8qDIbSTKq4XkRiUa454xm1npiA.ttf") format("truetype")}

This is still getting flagged with the "Ensure text remains visible during webfont load" audit:

Why is that?

[westonruter]

Seeing same warning in Lighthouse directly:

Again, this @font-face has font-display:swap; for https://weston.ruter.net/

[patrickhulce]

Thanks @westonruter that's a different issue! Filed #8534

[mhilko]

Hey,
This issue is faced by many developers and it's great that you know how to cope with it ;)
Recently I've come across a great guide that contains the most common issues with Google PageSpeed Insights. Here it is. It also contains the problem of the text remaining visible during webfont load. Hope it helps.