Lighthouse "Ensure text remains visible during webfont load " for local files

Question

I have 3 files that are being pointed out by the lighthouse.

These font files are located and hosted in our server, and this how it's being loaded in the head section.

<link rel="preload" href="/etc.clientlibs/farmers/clientlibs/clientlib-base/resources/fonts/SlatePro-Bk.woff" as="font" type="font/woff" crossorigin="anonymous"/>
<link rel="preload" href="/etc.clientlibs/farmers/clientlibs/clientlib-libraries/resources/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>
<link rel="preload" href ="/etc.clientlibs/farmers/clientlibs/clientlib-base/resources/fonts/SlatePro-Medium.woff"  as="font" type="font/woff" crossorigin="anonymous"/>

I added the &display=swap but it breaks the url and lighthouse does not recognize the URL

<link rel="preload" href="/etc.clientlibs/farmers/clientlibs/clientlib-base/resources/fonts/SlatePro-Bk.woff&display=swap" as="font" type="font/woff" crossorigin="anonymous"/>
<link rel="preload" href="/etc.clientlibs/farmers/clientlibs/clientlib-libraries/resources/fonts/fontawesome-webfont.woff2&display=swap" as="font" type="font/woff2" crossorigin="anonymous"/>
<link rel="preload" href ="/etc.clientlibs/farmers/clientlibs/clientlib-base/resources/fonts/SlatePro-Medium.woff&display=swap"  as="font" type="font/woff" crossorigin="anonymous"/>

How can I achieve to Ensure text remains visible during Webfont load for these 3 local files. I also get 404 when adding &display=swap tho those urls

Answer 1

You need to use font-display: swap; to enable font-swapping.

This tells the browser to not block rendering while it waits for the font (well it gives it a short time to load the font and if it doesn't receive it in time will use a fall-back and swap it out when the font is available.).

You should also inline this CSS as it is critical CSS

The &display=swap part is a Google CDN parameter, it is not something built into the browser and so it needs removing. Also as you are serving from local you do not need crossorigin="anonymous".

You also need to consider the woff2 format is not supported in Internet Explorer so you need a fallback for your font-awesome font.

For clarity

You need to define the font using @font and add the font-display: swap property.

@font-face {
  font-family: 'SlatePro-Bk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../etc.clientlibs/farmers/clientlibs/clientlib-base/resources/fonts/SlatePro-Bk.woff) format('woff');
}