WooCommerce.woff is loaded via @font-face - which hurts site performance and modularity

[asafm7]

Hi,

WooCommerce.woff is loaded via @font-face in woocommerce.css:

This means I can't remove and replace it, without removing woocommerce.css. Plus, I can't optimize the way it is loaded, although optimization indeed seems to be needed - from PageSpeed:

Can we consider loading it (and maybe all other WooCommerce related fonts) in a better way?

[haszari]

Hi @asafm7 – thanks again for suggesting ideas for how to optimise performance of Storefront. Also if you provide more info about how these performance issues affect your site (e.g. sales/engagement impact) then that will help us understand and prioritise.

If you have a specific solution in mind, please feel free to suggest or even open a PR. For example, would using font-display directive (e.g. fallback, swap or optional) work for your needs?

• https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
• https://www.namehero.com/startup/how-to-make-fonts-non-render-blocking/

[asafm7]

Hi @haszari - thank you for your reply.

About the performance issue - as seen in the screenshot, this can potentially save 10s on page loading time, which of course is an important factor for performance. My project is in its very early stages, so I can't yet say "this issue increases bounce rate by such and such".

About the improvements, I think there are 2 aspects:

1. Speed - I'm not an expert, but yes, as far as I know, using font-display: swap is a quick and efficient improvement.
2. Modularity - I think that the users (meaning, the developers) should be able to dequeue and replace everything. I, for example, will prefer to use Google's Material Design Icons both for visual consistency and for performance - as I'm already loading Material Design Icons. There is no need to load 2 sets of font icons. As far as I know, when a CSS file is using @font-face there is no way for me to dequeue the font file, without overriding the CSS file itself. Correct me if I'm wrong. As far as I know, using wp_enqueue_style() is the way to achieve this.

About opening a PR - although I have some basic experience with Git, I never opened a PR. It is something I intend to try soon. But, in this case, I don't know what is the best solution. Moreover, I think there should be consistency in the way resources are loaded by Storefront, again, both for performance and modularity reasons. So it seems like it is an issue that requires a more holistic and systematic approach.

Thank you again.

Let me know if there are more questions I can help with, Asaf

[haszari]

Let's try font-display: swap - might be a low-risk improvement. If this doesn't cause issues, and is a net positive according to benchmark/performance tools, might be worth doing. Note there's no urgency to try this, though I've added to the list of possible issues to include in 2.8.0.

cc @asafm7 - Based on your discussion above, you might be better off writing a child theme or implementing your own theme directly. This will give you more control over how assets are enqueued and loaded.

[asafm7]

Thanks @haszari .

I am, of course, using a child theme. But it doesn't help with the issue.

Even with a child theme, as long as the font file is imported using @font-face, I have no way of using the core woocommerce.css file, without loading the WooCommerce.woff font file.

My only option is overriding woocommerce.css altogether, which means I won't get updates for it. This is exactly my point about modularity. I would like to have the option to use core woocommerce.css with a different font icon file.

Thanks again, Asaf

[hteumeuleu]

@asafm7 Hi! One thing you can try is redeclare the @font-face in your own styles with a local() src only. This way the browser should not load the WooCommerce font files. Here’s an example:

@font-face {
	font-family: 'WooCommerce';
	font-style: normal;
	font-weight: normal;
	src: local('Arial');
}

Here’s a working example (unrelated to WooCommerce and storefront).

[asafm7]

Hi, @hteumeuleu , it is an interesting solution, but unfortunately, I couldn't make it work. Any ideas as to why? Were you able to get it to work for the same file?

I tried the suggestions made here, but it didn't work still: https://stackoverflow.com/questions/16901500/overriding-font-face-src-url

[hteumeuleu]

@asafm7 You're right! It seems a bit more complicated in the context of a storefront child theme. I made a test by creating a new child theme with a single style.css file with the following content:

/*
 Theme Name:   @font-face override
 Template:     storefront
*/

@font-face {
	font-family: 'WooCommerce';
	src: url("#foo") format("woff");
	font-weight: normal;
	font-style: normal;
}

The font files from WooCommerce.css seems to be ignored in Firefox, but not in Chrome. However, if I put a valid path in the src from inside my child theme folder, Chrome and Firefox will both correctly download the font from inside my theme. So you could try to put an empty woff file here (but the request would still be made, which is bad). Another idea would be to use a null data URL (like src: url(data:application/font-woff;base64,#), but this seems not to work either (probably because it's not a valid font file, and thus browsers try to download another source). Perhaps you can use this to come with another idea?

[asafm7]

Thank you @hteumeuleu,

As for now, I can't think of another good idea. And anyway it seems unpredictable and browser-dependent.

@haszari maybe we can conclude that @font-face is not the correct way for importing font files, because it is not modular?

Thanks, Asaf

[t1000upgraded]

I'm having this exact same issue and don't know what to do :(