Lighthouse "Ensure Text Remains Visible During Webfont Load " For Local Files
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
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 defin="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="https://caniuse.com/woff2" rel="nofollow noreferrer">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');
}
Related Questions
- → How to type tamil fonts in text boxes of a form field
- → Laravel css url does not work
- → function executing only the first statement (if) and not the second one (else if)
- → Fonts not found with nested routes in react-router
- → Google fonts + Pagespeed makes it blink
- → When using a stroke and fill on a font to create layers, how do I hide the duplicate text from screen readers and search engine bots?
- → How to add custom font in shopify site
- → How to hide icon fonts in search engine results?
- → Lighthouse "Ensure text remains visible during webfont load " for local files
- → Setting the font of an element, with jQuery .css() to a Google Fonts font
- → custom font picker in shopify not working as expected
- → Material-ui GridTile Title Color
- → Gulp File Not Copying Fonts