[Support request] Help with faster load of fonts

[Martina]

Hi,
I am trying to make my site load faster and it seems that fonts are slowing it down. I am not sure if I am using the local fonts or Google fonts at the moment. It looks like this loading
https://www.nestbauzeit.de/wp-content/themes/generatepress/fonts/generatepress.woff2

I tried to follow the tutorial to add fonts but I don´t know if I have to upload a ZIP or the individual files unzipped.

Thank you,
Martina

[David]

Hi there,

that is the GeneratePress icon font.
Go to Customizer > General and change the Icon Type to SVG – this will stop this font request.

[Sam]

Hello, this is interesting as I too have been getting Google PSI complaining about the generatepress fonts.

I tried the change you advise above, but because I am swapping the icon font for the cart with the below, it then doesn’t work. Do you know how I would make sure it then swaps the SVG for the font awesome icon. I know that sounds counterintuitive, but PSI is complaining most about the GP font.

.main-navigation a.cart-contents.shopping-bag:before {
    content: '\f290'!important;
    font-family: 'FontAwesome'!important;
}

thanks

[Elvin]

Hi Sam,

If I may suggest a better solution:

You can stick with SVGs and just download the /f290 shopping bag SVG file from FontAwesome to replace your site’s cart. Get the file here – https://fontawesome.com/icons/shopping-bag – there’s an SVG download link.

You can then open the SVG file in Chrome. Inspect the SVG and you should be able to see this code:

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shopping-bag" class="svg-inline--fa fa-shopping-bag fa-w-14" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M352 160v-32C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128v32H0v272c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V160h-96zm-192-32c0-35.29 28.71-64 64-64s64 28.71 64 64v32H160v-32zm160 120c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm-192 0c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24z"/></svg>

This is the SVG code. You can copy this and use it for the filter to replace the SVG icon for the cart basket.

You then replace the SVG cart for shopping bag icon with this:

add_filter( 'generate_svg_icon', function( $output, $icon ) {
    if ( 'shopping-bag' === $icon ) {
        $svg = '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="shopping-bag" class="svg-inline--fa fa-shopping-bag fa-w-14" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M352 160v-32C352 57.42 294.579 0 224 0 153.42 0 96 57.42 96 128v32H0v272c0 44.183 35.817 80 80 80h288c44.183 0 80-35.817 80-80V160h-96zm-192-32c0-35.29 28.71-64 64-64s64 28.71 64 64v32H160v-32zm160 120c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24zm-192 0c-13.255 0-24-10.745-24-24s10.745-24 24-24 24 10.745 24 24-10.745 24-24 24z"/></svg>';

        return sprintf(
            '<span class="gp-icon %1$s">
                %2$s
            </span>',
            $icon,
            $svg
        );
    }

    return $output;
}, 15, 2 );

I’ve basically pasted the SVG code we got from FontAwesome to the $svg value.

Note: Make sure Shopping Bag is the selected Menu Item Icon under Appearance > Customize > Layout > WooCommerce for this to work. https://share.getcloudapp.com/NQuJ68yO

[Sam]

Hi Elvin, thanks for this, a very clever solution!

One question… although the solution works, the only side affect is that the man nav becomes very slightly more spaced out when this is implemented compared with the Webfont.

What would the reason be for this, its in the introduction of the <span> element?

thanks
Sam

[David]

That code shouldn’t affect the spacing – can you share a link to where i can see the issue?

[Sam]

Hi David, thanks for the quick reply.

I wouldn’t say it is an issue as such, but it is very slightly different: looks like the width of each menu item increased very slightly: https://www.supereight.net

thanks

[David]

The only thing i can see is that the wishlist icon has some right margin which is making it look off center. Try this CSS to remove that:

span.wishlist_products_counter.top_wishlist-heart::before  {
  margin-right: 0 !important;
}

[Sam]

OK thanks I’ll check it out.

[David]

You’re welcome

[Author]

Posts