[Resolved] Bandwidth and FontAwesome

[dbunic]

Hi Tom!
First I will say that GeneratePress is wonderful theme – light, elegance and fast. Everything I need for my site.

The question is how to offload FontAwesome to some CDN (bootstrap) to reduce bandwidth. I have read some of your comments that in previous version GeneratePress theme pointed to boostrap. Newest version is bundled with fonts.

Is it possible and how to point WordPress to use FontAwesome from external location (I already use child theme)?

Oh, and my site is http://www.redips.net if you want to peek 😉

Thanks in advance.

[Tom]

WP.org requires us to bundle all files within the theme, so we can’t use the CDN.

However, you can simply dequeue our FontAwesome script and enqueue your own using the CDN.

Add this function to your child theme’s functions.php file:

add_action( 'wp_enqueue_scripts', 'generate_custom_scripts', 10 );
function generate_custom_scripts() {
      wp_dequeue_style( 'fontawesome' );
      wp_enqueue_style( 'fontawesome-cdn', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', false, '4.3.0', 'all' );
}

That should do it 🙂

[dbunic]

Hi Tom,
after placing your code to my child functions.php “font-awesome.min.css” started to load from bootstrapcdn and still from my site (?!). This also resulted with loading fontawesome-webfont.woff2 from my site too (loading of woff2 is defined in css). I think the solution is to enqueue style with the same name as in wp_dequeue_style() line, and after changing second line to:

wp_enqueue_style( ‘fontawesome’, ‘//maxcdn…

both files started to load from bootstrapcdn.

Thank you for support and quick answer.

Kind regards,
dbunic

[Tom]

Interesting – I just tested it on my localhost and it worked perfectly. It remove the theme’s fontawesome file, and enqueued the CDN.

Perhaps try to increase the number “10” to something higher (so it processes later).

[dbunic]

Yes,
after priority param is changed to 100, everything is fine – thx!

add_action(‘wp_enqueue_scripts’, ‘generate_custom_scripts’, 100);
wp_dequeue_style(‘fontawesome’);
wp_enqueue_style(‘fontawesome-cdn’, ‘//maxcdn..
}

And one question for the end 😉

Is “superfish.js” needed in case if I don’t have hierarchy menus? My web has only one level menu so I would like to exclude loading superfish jQuery plugin.

Thank you very much for your generous support!

Regards,
dbunic

[Tom]

It shouldn’t be needed if you’re not using dropdown menus.

So your function would now be:

add_action( 'wp_enqueue_scripts', 'generate_custom_scripts', 100 );
function generate_custom_scripts() {
      wp_dequeue_style( 'fontawesome' );
      wp_dequeue_style( 'superfish' );
      wp_dequeue_style( 'hoverIntent' );
      wp_enqueue_style( 'fontawesome-cdn', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', false, '4.3.0', 'all' );
}

[dbunic]

That will be all for now and thank you very much!

Kind regards,
dbunic

[Tom]

You’re welcome 🙂

[Ivan Maria Spadacenta]

I write in this topic because this is the same problem I have but I have a problem with the proposed solution.

In my functions.php child I have at top:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 10 );
function enqueue_parent_theme_style() {
	wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_dequeue_style( 'fontawesome' );    
    wp_enqueue_style( 'fontawesome-cdn', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css', false, '4.3.0', 'all' );
}

This causes 4 successfull loads loads:
1) https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?ver=7021f9b60a67bf4831db1f952ee9c3ef
2) http://www.mysite.com/wp-content/themes/generatepress/css/font-awesome.min.css?ver=7021f9b60a67bf4831db1f952ee9c3ef
3) http://www.mysite.com/wp-content/themes/generatepress/fonts/fontawesome-webfont.woff2?v=4.5.0
4) https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0
Fonts are correctly displayed. but as you can see I have font-awesome.min.css loaded twice and fontawesome-webfont.woff2 loaded from my server.

If I change action priority from 10 to 100:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 10 );

I have 3 successfull loads:
1) https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?ver=7021f9b60a67bf4831db1f952ee9c3ef
2) https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0
3) http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/fonts/fontawesome-webfont.woff?v=4.2.0

Fonts are NOT correctly displayed. Arial is used.
Can you help?

Thank you!

[Ivan Maria Spadacenta]

It seems that removing the line
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
rom my child’s functions.php solved this issues.
I thohk this line from https://codex.wordpress.org/Child_Themes… so I’m a little confused now 😀
Shouldn’t this line be used?

[Tom]

No that line shouldn’t be used – GP does it all for you.

Everything else looks great 🙂

[Author]

Posts