Support » Theme: Astra » Preload astra.woff

  • Hi,

    I get the following in Google PageSpeed for astra.woff

    Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load.

    What exactly does this font do? The way it is right now it’s slowing down my site by 2-3 seconds.
    Can you please fix this?

    Thank you!

    • This topic was modified 11 months, 2 weeks ago by lauratraveler.
Viewing 15 replies - 1 through 15 (of 23 total)
  • 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 11 months, 2 weeks 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 11 months, 1 week 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

    lauratraveler

    (@lauratraveler)

    @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!

    lauratraveler

    (@lauratraveler)

    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.

    lauratraveler

    (@lauratraveler)

    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.

    lauratraveler

    (@lauratraveler)

    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)

Viewing 15 replies - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.