Archived topic

local font & google page speeds

5 replies · Started by kiant123 on April 5, 2021

Viewing posts 1–6 of 6

April 5, 2021 at 4:06 am #1721759

Hi,

This morning I successfully added google local fonts to the system fonts in wordpress.

When I run a page speed insight test for a page on my site I get a recommendation to 'ensure text remains visible during webfont load'.

How do I address this issue?

I saw an initial post on this forum about preloading the fonts in a hook which I have tried but it doesn't seem to change the diagnostic results. Is this the right way to go to address this issue?

I've added a link showing how I have set up the webhook. Perhaps i've set it up incorrectly?

Thanks

April 5, 2021 at 4:44 am #1721801

Hey,

I recently had this issue too and adding the following CSS rule to my local loaded fonts solved the issue:

font-display: swap;

Maybe this helps :)

Cheers
Ronja

April 5, 2021 at 4:52 am #1721813

Hi Ronja,

Can you please share the exact code snippets you used to add 'font-display: swap' to your local fonts.

This might be useful for me too :)

Thanks!

April 5, 2021 at 4:59 am #1721817

Thanks Ronja

Hi there,

so the font-display: swap; gets added to your @font-face CSS - heres an example:

@font-face {
  font-family: 'Example';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('full_url_to_font');
}

April 5, 2021 at 5:23 am #1721835

Hi David,

Thanks for that.

Does that mean I can delete the webhooks I attempted to set up (The image I attached in the first post)?

In addition, the diagnostics has changed slightly now to fonts/generatepress.woff2 and icons/gp-premium.

Is there a way to deal with this too?

Thanks

April 5, 2021 at 4:11 pm #1722608

You have a choice - either:

1. You can keep the Hooked preloaded font links. The benefits of doing so is there is no font swapping that 'can' cause CLS when the font changes. But the weigh off is it may increase the initial loading time.

2. Use the font swap CSS - but you may see CLS because of it.

I would test both options to see what performs best for your site.

For the generatepress.woff - go to Customizer > General and change the Icon Type to SVG.

This archived topic is closed to new replies.

Start building better websites today.