font-display: swap and &display=swap

Hi Steve,

Please check the bottom of this page for the code needed to add “display=swap” to the google fonts URL:

https://www.megamenu.com/documentation/google-fonts/

Regards,
Tom

Thank you Tom, apologies for not looking through the documentation first.

I did have a thorough look through the settings options but could not find anything.

Steve.

• This reply was modified 4 years, 2 months ago by stepfaul.

Hi Steve,

No problem – I added it after you asked ??

Regards,
Tom

Thanks Tom,

Just one more question (apologies as I have only just had a chance to test this fully), I have added the snippet to my functions.php but when running a Google page speed test and looking at the Desktop results I can see the font files for the Google font sourcesanpro are triggering an opportunity. I think this is because the font does not have font-display: swap in the css like the Google Example:

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

Might it be possible to add this to all the font variations? This would at least improve things from that perspective.

I hope I am not being picky but I am trying to prepare the site as best as I can for the up and coming changes where Google will use core web vitals as a ranking factor.

Thanks again.

Steve.