How to ensure text remains visible during webfont load?

Support
#1

Hi,

When I run pagespeed insights I get this suggestion:

How can I ensure that the text remains visible during webfont load?

-Timo

#2

Hi Timo,

Thank you for writing in, you can ignore that warning as I see that is related to FontAwesome, FontAwesome was not meant to show a text, its the icons. Showing text (in icon’s place) before the FontAwesome loads is not a good idea either because you’re going to see unicodes before the actual icons.

You can follow some of the guide we provided here to improve your site performance.

Cheers!

#3

Hi,

But can I do that with some code? I don´t really care if the user sees unicodes for a period of time…

-Timo

#4

Hi Timo,

Please add this on top of Theme Options > CSS

@font-face {
  font-family: "FontAwesome", Arial, serif;
  font-display: swap;
}

More details about font-display

I correct myself, its not actually a unicodes but an odd looking square.

Cheers,

#5

Hi,

I´m still getting the same suggestion on page speed insights so seems like that code does not work.

-Timo

#6

Hey Timo,

In theory, that code by Friech is correct. That just might not be the right code for you.

The correct method to use is to add the font-display to each of the Font Awesome font-face declarations in the stack’s CSS.

I have tested doing that though and still the PageSpeed Insights does not recognize the font-display.

This is now in our issue tracker and I’ll test this again and as soon as the error disappears on my end, we’ll update the stacks’ CSS.

Please stay tuned.

Thanks.

#8

Hi,

Ok thanks! Let me know when you get it sorted out.

-Timo

#9

And can you give me the code for this so I can test it out?

-Timo

#10

Hi Timo,
I am not sure how helpful the code will be as it should be changed from the core of the theme and it is already a minified CSS file in the path below:

/wp-content/themes/pro/cornerstone/assets/dist/css/site/style.css

I used Pro to test this out if you have X the same path will be inside the Cornerstone plugin.

But if it helps here is the code with the added swap feature:

@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../../../dist/fonts/fa-solid-900.eot");
    src: url("../../../dist/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-solid-900.woff2") format("woff2"), url("../../../dist/fonts/fa-solid-900.woff") format("woff"), url("../../../dist/fonts/fa-solid-900.ttf") format("truetype"), url("../../../dist/fonts/fa-solid-900.svg#fontawesome") format("svg")
}
@font-face {
    font-family: 'FontAwesomeRegular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../../dist/fonts/fa-regular-400.eot");
    src: url("../../../dist/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-regular-400.woff2") format("woff2"), url("../../../dist/fonts/fa-regular-400.woff") format("woff"), url("../../../dist/fonts/fa-regular-400.ttf") format("truetype"), url("../../../dist/fonts/fa-regular-400.svg#fontawesome") format("svg")
}
@font-face {
    font-family: 'FontAwesomeLight';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../../../dist/fonts/fa-light-300.eot");
    src: url("../../../dist/fonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-light-300.woff2") format("woff2"), url("../../../dist/fonts/fa-light-300.woff") format("woff"), url("../../../dist/fonts/fa-light-300.ttf") format("truetype"), url("../../../dist/fonts/fa-light-300.svg#fontawesome") format("svg")
}
@font-face {
    font-family: 'FontAwesomePro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../../../dist/fonts/fa-solid-900.eot");
    src: url("../../../dist/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-solid-900.woff2") format("woff2"), url("../../../dist/fonts/fa-solid-900.woff") format("woff"), url("../../../dist/fonts/fa-solid-900.ttf") format("truetype"), url("../../../dist/fonts/fa-solid-900.svg#fontawesome") format("svg")
}
@font-face {
    font-family: 'FontAwesomePro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../../dist/fonts/fa-regular-400.eot");
    src: url("../../../dist/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-regular-400.woff2") format("woff2"), url("../../../dist/fonts/fa-regular-400.woff") format("woff"), url("../../../dist/fonts/fa-regular-400.ttf") format("truetype"), url("../../../dist/fonts/fa-regular-400.svg#fontawesome") format("svg")
}
@font-face {
    font-family: 'FontAwesomePro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../../../dist/fonts/fa-light-300.eot");
    src: url("../../../dist/fonts/fa-light-300.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-light-300.woff2") format("woff2"), url("../../../dist/fonts/fa-light-300.woff") format("woff"), url("../../../dist/fonts/fa-light-300.ttf") format("truetype"), url("../../../dist/fonts/fa-light-300.svg#fontawesome") format("svg")
}
@font-face {
    font-family: 'FontAwesomeBrands';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url("../../../dist/fonts/fa-brands-400.eot");
    src: url("../../../dist/fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../../../dist/fonts/fa-brands-400.woff2") format("woff2"), url("../../../dist/fonts/fa-brands-400.woff") format("woff"), url("../../../dist/fonts/fa-brands-400.ttf") format("truetype"), url("../../../dist/fonts/fa-brands-400.svg#fontawesome") format("svg")
}

Thank you.

#12

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.