PSI Ensure text remains visible during webfont load issue

Hi,

I’m trying to get rid of the issue by adding the following two lines, one for Google font and the other for local font,

&display=swap
font-display: swap;

Where should I add those?

My site,

Hello there,

I’d like to help. But sorry, I didn’t know where the issue appears on. Because I saw font loads fine when website loads. Do you have screen recording to share here?

Regards,
Kharis

Hi Kharis,

When I run Google PageSpeed Insights I get the issue, Ensure text remains visible during webfont load. I’m trying to improve it. Here’s a site that explains how to under the Fixing Embeded Google fonts and Fixing Local Web Fonts sections,

But where should I add those to?

I added like the following under Customize/Font - Body font name/style/sets,
//fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,600italic&display=swap

and Header font name/style/sets,
//fonts.googleapis.com/css?family=Josefin+Sans:300italic,300&display=swap

Are those ok? PSI test result seems better but not quite good enough. Can you please help me insert the other code for local font?

//fonts.googleapis.com/css?family=Open+Sans:300,300italic,600,600italic&display=swap
//fonts.googleapis.com/css?family=Josefin+Sans:300italic,300&display=swap

Those are valid.

You would probably need faster load Google fonts. Read this article that will tell how to do so. I feel @font-face declaration would the most reliable to be applied in Astrid. You would be able to do it in a child theme. For complete instruction, follow the steps I wrote in this thread:

Regards,
Kharis

Thank you, Kharis. I’ll look into them.

You’re welcome @sailor!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis,

Sorry, again. I also wanted to ask you about fontawesome of the same issue above. If I add the following code in the child-theme’s CSS, would that work and solve the issue?

    @font-face{
        font-family:FontAwesome;
        font-display: swap;
        src:url(fonts/fontawesome-webfont.woff2?v=4.5.0);
    }

Hello there,

That won’t work because font URL looks invalid.

    fonts/fontawesome-webfont.woff2?v=4.5.0

If you do this, your child theme must have fonts folder and the font files are stored in it.

Regards,
Kharis

Thank you, Kharis.

I changed to this, if you see something wrong please let me know,

    @font-face{
        font-family:FontAwesome;
        font-display: swap;
        src:url(/wp-content/themes/astrid/fonts/fontawesome-webfont.woff2?v=4.5.0);
    }

Try replacing it with:

  https://yoursite.com/wp-content/themes/astrid/fonts/fontawesome-webfont.woff2?v=4.5.0

Regards,
Kharis

Thank you, Kharis as always.
I changed to yours and my site seems fine.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis