Menu
Ensure text remains visible during webfont load issue is not getting resolved in google pagespeed insights report even after adding font-display: fallback to the CSS.
How can I resolve the issue?
@font-face {
font-family: Jura;
src: url(../fonts/Jura-Regular.eot);
src: url(../fonts/Jura-Regular.eot?#iefix) format('embedded-opentype'), url(../fonts/Jura-Regular.woff2) format('woff2'), url(../fonts/Jura-Regular.woff) format('woff'), url(../fonts/Jura-Regular.ttf) format('truetype'), url(../fonts/Jura-Regular.svg#svgFontName) format('svg');
font-weight: 400;
font-display: fallback;
}
475
I got rid of it by adding font-display: swap;
@font-face{
font-family:FontAwesome;
font-display: swap;
src:url(fonts/fontawesome-webfont.eot?v=4.5.0);
}
This issue can be solved by adding an online JS library of the font-awesome between head tag on website.
https://fontawesome.com/how-to-use/with-the-api/setup/configuration#configuration
<html>
<head>
<script>
FontAwesomeConfig = {searchPseudoElements: true}
</script>
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>
</head>
<body></body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
