[Resolved] Optimizing fonts

[Aaron]

Hi everyone,

I’m working on the load times for one of my pages – https://acarvedpiece.co.nz/shop and noticed in pingdom that the fonts were 34% of the page size – 320KB.
This page has an essential grid on it. I read this article – https://razorfrog.com/disable-default-punch-fonts-essential-grid-plugin/ that talks about E-grid loading 3 default fonts. In GTmetrix I found that all the fonts loaded were these three. This is the code the article recommended to stop these loading.

////////////////////////////////////////////////////////////
// deregister default punch fonts
////////////////////////////////////////////////////////////
add_action( ‘wp_print_styles’, ‘rzf_deregister_punch’, 100 );
function rzf_deregister_punch() {
wp_deregister_style( ‘tp-open-sans’ );
wp_deregister_style( ‘tp-raleway’ );
wp_deregister_style( ‘tp-droid-serif’ );
}

I added this into the the additional ccs part of customize – but it hasn’t made a difference, Could anyone help?

Thanks
Aaron

[Aaron]

Me again,
I realized I should have put it in my functions.php file. I see I need to make/use a child theme functions.php file. Is this complicated?
Thanks
Aaron

[Aaron]

Me again,
So I created a child theme along with a functions.php file. I added the above code to it but it stuffed up my site, the code appeared along the top of the page and nothing loaded under the nav bar. Is there a way I could do this?
Thanks
Aaron

[Elvin]

Hi there,

Child themes aren’t complicated if the sole purpose is for its functions.php. It only gets complicated when you’re doing the templates.

If you’re struggling with the child theming, check our article about it here.
https://docs.generatepress.com/article/using-child-theme/

Frankly, a child theme isn’t necessary if you only need to run the PHP snippet you’ve provided.

On our article here – https://docs.generatepress.com/article/adding-php/ – aside from using child theme’s functions.php, you can also try Code Snippets plugin.

I added the above code to it but it stuffed up my site, the code appeared along the top of the page and nothing loaded under the nav bar. Is there a way I could do this?

How did you add it specifically? It shouldn’t render as a visible string of texts on the front end if the syntax is correct.

[Aaron]

Hi,
Thank you for your reply,

I made a functions.php file in my child theme and pasted the code the article provided. This –

///////////////////////////////////////////////////////////
// deregister default punch fonts
////////////////////////////////////////////////////////////
add_action( ‘wp_print_styles’, ‘rzf_deregister_punch’, 100 );
function rzf_deregister_punch() {
wp_deregister_style( ‘tp-open-sans’ );
wp_deregister_style( ‘tp-raleway’ );
wp_deregister_style( ‘tp-droid-serif’ );
}

Thanks
Aaron

[Elvin]

Do you have this activated now?

I don’t see raleway or droid serif being loaded to the site as shown here – https://share.getcloudapp.com/QwuENyoE

But I’m not sure if the snippet actually works because there’s still this – https://share.getcloudapp.com/E0uYxNOp

Let’s check first if the PHP has the correct syntaxes.

On your code, can you make sure you’re using ' on the single quote marks instead of ‘ and ’?

Also, can you try adding this PHP snippet and let us know? This PHP snippet does nothing. it’s purpose is to let me know if the functions.php you’re using actually works.

add_action('wp_head', function(){ 
echo '<style class="this-is-a-test"> </style>';
});

Let us know.

[Aaron]

Hi, thank you

I’ve added your code to the child themes function file.

“I don’t see raleway or droid serif being loaded to the site as shown here –”

I’m just going by the pages report in Gtmetrix – https://gtmetrix.com/reports/acarvedpiece.co.nz/H7ibnWgj/ under waterfall and fonts it shows the three mentioned fonts

“On your code, can you make sure you’re using ‘ on the single quote marks instead of ‘ and ’?”

No I wasn’t , I just cut and pasted their code which if I understand it is wrong.

I haven’t got their code activated at the moment because of what it does to my site,

Thanks for your help,
Aaron

[Elvin]

I’ve added your code to the child themes function file.

Thanks. You can remove it now. I can confirm that what you’re using works as this actually showed up – https://share.getcloudapp.com/eDujNKAr

I’m just going by the pages report in Gtmetrix – https://gtmetrix.com/reports/acarvedpiece.co.nz/H7ibnWgj/ under waterfall and fonts it shows the three mentioned fonts

Yeah, my bad on that. The font request was compressed. There are actually 3 fonts in 1 line.

I haven’t got their code activated at the moment because of what it does to my site,

Can you try applying it now and let me see what happens to the site?

I understand that you’ve already mentioned it here – https://generatepress.com/forums/topic/optimizing-fonts/#post-1788703

also, can you show a screenshot of the contents of the functions.php with this code activated. Perhaps its a simple syntax or PHP delimiter issue.

If you could provide us temporary backend credentials, we can help out in checking the site. You can use the private information text field to provide the site details.

[Aaron]

Hi,

I’ve added the code again to my functions.php but changed the single quote marks to ‘instead of ‘ and ’. The site seems fine visually but GTmetrix still shows the 3 fonts being loaded

Here’s the functions file – https://acarvedpiece.co.nz/functions-php-abrown/

thanks
Aaron

[Elvin]

Thanks,

I’ve checked the site and it seems like it should be working.

To be frank, this is outside of the theme’s scope of support as it’s a third-party plugin issue but to help you out:

I did a bit of research and found it’s code https://github.com/3773nortiz/surfside/blob/7d02feaa6ee7086f7dbf9cdcce2fbaa7978e4556/wp-content/plugins/essential-grid/includes/fonts.class.php#L122-L130

I’m not exactly sure it’s the most updated one but it seems to match what’s installed on your site.

It looks like the snippet should work but since it doesn’t, can we try disabling Essential Grid plugin temporarily and check if the font requests with it disabled to see if the actual font request is coming from the plugin?

If the mentioned fonts still show up even when the plugin is disabled, it’s possible that the request for the fonts is coming from another plugin.

If the mentioned fonts don’t get requested anymore then that means the fonts really are being requested only by Essential Grid.

This means that the PHP snippet isn’t working as intended.

In this case, we recommend contacting the plugin’s support on how to dequeue their fonts as they know more about the ins and outs of their plugin. 😀

[Aaron]

Awesome, thank you for your help!
Aaron

[Elvin]

Glad to be of any help. No problem. 😀

[Aaron]

Thanks

[Author]

Posts