Preload astra.woff

This solution worked for me : https://wpastra.com/docs/disable-loading-astras-default-font-file-astra-woff/

Disabling it’s not the solution as it turns out this is needed for the hamburger menu on mobile… Maybe using the <link rel=preload> as Google suggests is the way to go?

That’s right. I eventually put

.ast-button-wrap .menu-toggle .menu-toggle-icon::before {
	font-family: "Font Awesome 5 Free"; font-weight: 900;
    content:"\f0c9";
	}
.ast-button-wrap .menu-toggle.toggled .menu-toggle-icon::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    content:"\f0c9";
}

in custom CSS, but it add the same error with FA…

• This reply was modified 4 years, 11 months ago by Ulrich.

I use Font Awesome and Astra.woff. Astra.woff has a size of only 3 KB – and does not have a significant impact on page loading speed. But in my case, it would be nice to disable Astra.woff, replacing it with Font Awesome.

.ast-button-wrap .menu-toggle .menu-toggle-icon::before {
	font-family: "FontAwesome";
    content:"\f0c9";
	}
.ast-button-wrap .menu-toggle.toggled .menu-toggle-icon::before {
    font-family: "FontAwesome";
    content:"\f00d";
}

Of course, page loading speed depends not only on file size. But you can use caching or, in the end, completely abandon fonts and replace them with images. I am wondering if rel = preload will affect speed.

Hey @lauratraveler,

The astra.woff file is used to load icons in the menu and some other styling in the theme.
This file is very lightweight ( around 4 KB ) and it should not take much time to load on the site.

Can you provide your site URL so we can check why it is affecting site load time by 2-3 seconds?

Looking forward to hearing from you.

Regards,
Vikas

I’m having the same issue. My Clients side reports 5.34 seconds to load astra.woff

https://www.hotelcityplazapanama.com/

Page Speed report
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.hotelcityplazapanama.com%2F&tab=mobile

• This reply was modified 4 years, 11 months ago by jvonlindeman.

Hello @jvonlindeman and others,

Can you try using the following code in the functions.php of your child theme to see if it helps – https://gist.github.com/Balachandark/3bc4abaccf1bf07fcec378d1dc59b719 ?

In the above code, we are disabling the default fonts and preloading the Astra fonts using the wp_head action.

Do try this solution and let us know if it helps.

Regards,
Suman

@brainstormteam Using that code in the functions.php seems to work.

Adding <link rel=”preload” href=”wp-content/themes/astra/assets/fonts/astra.woff” as=”font” type=”font/woff” crossorigin> in the header.php works as well.

Which of the two solutions is better?

Thanks!

Btw, with the above code in functions.php, I get the following warning in Google Pagespeed

Ensure text remains visible during webfont load
Warnings: Lighthouse was unable to automatically check the font-display value for the following URL: https://www.site.com/wp-content/themes/astra/assets/fonts/astra.svg.

astra.woff and astra.ttf are also listed under the ‘Ensure text remains visible during webfont load’ diagnostic, although there’s no warning for them.

But I’m not getting any further warnings when using <link rel=”preload” href=”wp-content/themes/astra/assets/fonts/astra.woff” as=”font” type=”font/woff” crossorigin> in the header.php

So if you ask me, using <link rel=”preload” href=”wp-content/themes/astra/assets/fonts/astra.woff” as=”font” type=”font/woff” crossorigin> in the header.php is the way to go.

Also, astra.woff continues to be listed under ‘Avoid chaining critical requests’…

Hello @lauratraveler

Glad it worked to some extent.

We have fixed the lighthouse warning. You can find the updated code in the provided gist link to see how it goes.

While we were unable to see Avoid chaining critical requests‘ issue on your site.

Do let us know, how we can see the issue on your end.

Regards,
Suman

Hi @brainstormteam

The lighthouse warning is not fixed in the gist.
I addressed this in a new topic here.

Thanks

I am new with using WordPress and Astra Pro. Where do I navigate to and insert:
<link rel=”preload” href=”wp-content/themes/astra/assets/fonts/astra.woff” as=”font” type=”font/woff” crossorigin> in the header.php

Please let me know, thanks.

…(additional info if it makes a difference: I am using Astra Pro along with Elementor Pro)