My Google Pagespeed report shows an error about the fonts: “Ensure Text Remains Visible During Webfont Load”
I tried to reach one of the admins of my site, and he pointe to me that:
2. There seems to have some invalid characters in your Google Fonts embed: https://fonts.googleapis.com/css?family=Lato%3A400%2C400italic%2C600%2C600italic%7COswald%3A400%2C400italic%2C600%2C600italic%7CLato%3A400%2C700%2C500%7COswald%3A400%2C500%2C600&display=swap&ver=10.3.9.1.
Also, your theme has already tried to fix it by adding display=swap. However, since the URL has invalid characters, it’s not working. I would suggest you contact the theme developer. Here is the correct URL: https://fonts.googleapis.com/css?family=Lato%3A400%2C400italic%2C600%2C600italic%7COswald%3A400%2C400italic%2C600%2C600italic%7CLato%3A400%2C700%2C500%7COswald%3A400%2C500%2C600&display=swap
Can we do something about it? Thanks in advance!
Hello!
For this you need to use preload fonts like in this guide: https://www.infophilic.com/get-almost-100-pagespeed-newspaper-theme/ ;
https://i.imgur.com/mg2WGjF.png
Hope that helps you!
Thank you!
Hi, Bettina!
I thought TagDiv team did not support the use of WPRocket, as it is implied in the image you annexed in the answer. Correct me if I am wrong, please.
Anyway, I do not use it (using another plugin at the moment), and already enabled the preload fonts.. no result (better, the PageSpeed suggestion only shows when I enable the “preload fonts option”).
It seems that the Newspaper theme inserts a query string in the CSS (&ver=10.3.9.1). And, because of that, PageSpeed don’t recognize the display=swap query. Could that be the issue? If yes, there is a way to fix this?
Hello!
Yes, you are right. This plugin is an untested one with our theme, but in this documentation it was a recommendation for how you can use preload fonts option.
Our theme inserts a query string in the CSS (&ver=10.3.9.1), but this shouldn’t be an issue for it. It is possible to remove it if you want, but this can be found in many files.
You can find out that you can do the preload manually also, check this topic: https://forum.tagdiv.com/topic/what-is-this-archive/
Thank you!
Hi, Bettina!
What are the files that contain the query string inserted by the theme? I’d like to take a look in these files and test them, although it could not be the source of the problem. No harm to test, uhn?
For the preload, thanks for the indication, but I’d have already this sorted.
Hello!
Here are the files where you can find this in our theme: https://www.screencast.com/t/8A7oEQzYa ; and in our plugins: https://www.screencast.com/t/Lg3TJkIP9w6
Hope that helps you somehow!
Please let’s continue this topic on email to not speak in 2 directions and help you efficiency.
We are sorry for the inconvenience!
Thank you for your understanding!
Hi, Bettina!
Just a follow up about the fonts issue: I was not able to fix it (removing the query strings did nothing); what I did was to implement another plugin (https://wordpress.org/plugins/host-webfonts-local/) to handle my Google Fonts.
Thanks for the help!
I’m also facing the same issue. How to handle it without plugin?
You can add the code to Function.php (and extend it with your fonts)
function dns_prefetch_mobile() {
echo ‘<link rel=”preload” href=”/wp-content/plugins/td-composer/assets/fonts/td-multipurpose/td-multipurpose.ttf” as=”font” type=”font/ttf” crossorigin=”anonymous”>’ . “\n”;
echo ‘<link rel=”preload” href=”/wp-content/themes/Newspaper/images/icons/newspaper.woff” as=”font” type=”font/woff” crossorigin=”anonymous”>’ . “\n”;
}
add_action( ‘wp_head’, ‘dns_prefetch_mobile’, 0 );`
