Self-Host Font Awesome in WordPress

Eliminate multiple instances of Font Awesome on your WordPress website, and replace them all with a single self-hosted instance.

When you’re working on a WordPress site and relying on plugins, you’ll often find your site has multiple references to Font Awesome stylesheets. Although not really a problem, having two or three references to the same content will slow down your site. The browser is having to make more outgoing connections, to load duplicate content, on every page-load.

In this tutorial, we’ll rip out all these instances of Font Awesome and replace them with a single self-hosted instance. I like to self-host the CSS because the CSS aggregator/minifier (e.g. Autoptimize) can merge the Font Awesome stylesheet with your site’s stylesheets, into a single file.

This is a repeatable process, which should work on any WordPress site:

tipDon’t do this until your site is close to deployment. If you optimise Font Awesome (FA) near the start of the project, you might find that you need to add another plugin that has (yet another) reference to FA. So do it near the end of the project.

• Find out if your site’s using FA 4, FA 5, or both. If your site’s using both versions, we can use a self-hosted FA 5 with the FA 4 shims, which is tidier than referencing the full versions of both FA 4 and FA 5.
• Set up a hook to dequeue all instances of FA.
• Enqueue your self-hosted FA in the document header.
• Make sure there aren’t any FA instances left over in the footer.

importantBefore you start, make sure you’re using a custom child theme so you can edit your functions.php file.

Analyse Your Site

The first step is to find all the instances of FA that are being pulled into your site.

1. Navigate to any page on your site.
2. Find your browser’s “View Page Source” option. Sometimes it can be useful to do a Reload in the source viewer window after it’s opened CtrlR.
3. Search for the word “awesome” and loop through all the references. We need a list of the WordPress stylesheet handles, which are just the stylesheet ids with the trailing “-css” removed.
4. Check the URL that’s being included and you’ll see “ver=” is something like “4.x.x” or “5.x.x” – this is the FA version. Make a note of this so you know which versions of FA you need to include.

Download the Font Awesome CSS and Font Files

Create three new folders in your custom child theme, called “fontawesome“, “fonts” and “webfonts“. We’ll put the CSS files into “fontawesome”, and the actual font files will go into “fonts” (FA 4) and “webfonts” (FA 5).

This is what the three folders should look like in your custom child theme…

/fontawesome

/fonts

/webfonts

The WordPress PHP Code

In WordPress, stylesheets are usually enqueued in the header (priority 10 – standard), and sometimes in the footer. We’re going to hook into the wp_enqueue_scripts action with a priority of 99, so our code will run after all the other plugins have enqueued their scripts and stylesheets. In our function, we’ll dequeue all the handles that we’ve identified. After all the FA handles have been dequeued, we’ll enqueue our own stylesheet(s). Easy.

In your custom child theme, create a new file called functions-font-awesome.php and paste the following into it:

<?php

/**
 * WP Tutorials Self-Hosted Font Awesome.
 *
 * https://wp-tutorials.tech/optimise-wordpress/self-host-font-awesome-in-wordpress/
 */

defined('WPINC') || die();

/**
 * Set to 'fa4', 'fa5' or 'both'
 */
const WPTFA_MODE = 'both';

const WPTFA_FA4_VERSION = '4.7.0';
const WPTFA_FA5_VERSION = '5.15.4';

/**
 * Dequeue Font Awesome from parent theme and plugins.
 */
function custom_dequeue_plugin_font_awesomes() {
	// Add your discovered font-awesome handles in here.
	// e.g. if you see this in your site's HTML...
	// <stylesheet id="foobar-font-awesome-css" src=...
	// ...then the handle is this...
	// 'foobar-font-awesome'

	// These are only examples. You can trim this list, or expand it,
	// depending on the handles you discover in your site's HTML.
	wp_deregister_style('fa4');
	wp_deregister_style('fa-4');
	wp_deregister_style('fontawesome');
	wp_deregister_style('fontawesome4');
	wp_deregister_style('fontawesome-4');
	wp_deregister_style('font-awesome');
	wp_deregister_style('font-awesome4');
	wp_deregister_style('font-awesome-4');
	wp_deregister_style('font-awesomeWpf');
	wp_deregister_style('prefix-font-awesome');
	wp_deregister_style('sb-font-awesome');
	wp_deregister_style('font-awesome-css-cdn');
	wp_deregister_style('fa5');
	wp_deregister_style('fa-5');
	wp_deregister_style('fontawesome5');
	wp_deregister_style('fontawesome-5');
	wp_deregister_style('font-awesome5');
	wp_deregister_style('font-awesome-5');
	wp_deregister_style('iheg-fontawesome');
	wp_deregister_style('ecwd_font-awesome');
	wp_deregister_style('font-awesome-css-cdn-5.2.0');
}
add_action('wp_enqueue_scripts', 'custom_dequeue_plugin_font_awesomes', 98);
add_action('wp_footer', 'custom_dequeue_plugin_font_awesomes', 5);

/**
 * Enqueue our own Font Awesome.
 */
function custom_enqueue_local_font_awesome() {
	$theme_version = wp_get_theme()->get('Version');
	$base_uri = get_stylesheet_directory_uri();

	switch (WPTFA_MODE) {
	case 'both':
		wp_enqueue_style(
			'wptfa-font-awesome-5',
			$base_uri . '/fontawesome/font-awesome-5.min.css',
			null,
			WPTFA_FA5_VERSION
		);
		wp_enqueue_style(
			'wptfa-font-awesome-4',
			$base_uri . '/fontawesome/font-awesome-5-v4-shims.min.css',
			array('wptfa-font-awesome-5'),
			WPTFA_FA4_VERSION
		);
		break;

	case 'fa5':
		wp_enqueue_style(
			'wptfa-font-awesome-5',
			$base_uri . '/fontawesome/font-awesome-5.min.css',
			null,
			WPTFA_FA5_VERSION
		);
		break;

	case 'fa4':
		wp_enqueue_style(
			'wptfa-font-awesome-4',
			$base_uri . '/fontawesome/font-awesome-4.min.css',
			null,
			WPTFA_FA4_VERSION
		);
		break;

	default:
		// Error - unknown mode.
		error_log('Unknown FontAwesome mode: ' . WPTFA_MODE);
		break;
	}
}
add_action('wp_enqueue_scripts', 'custom_enqueue_local_font_awesome', 99);

The code breakdown is straightforward. We’ve got a function that dequeues all the stylesheet handles, and a function that enqueues our self-hosted FA. The function that dequeues the unwanted Font Awesome handles is called at the end of wp_enqueue_scripts actions, and again before the wp_footer action.

Now we just need to pull this in from our theme’s functions.php file. Edit your child theme’s functions.php file and paste the following into it:

// WPT Font Awesome Optimisation.
require_once dirname(__FILE__) . '/functions-font-awesome.php';

Now you just need to reload your site in the page source viewer, search for the phrase “awesome” and you should only see our “wptfa-font-awesome-4” and/or “wptfa-font-awesome-5” handles.

Wrapping Up

That’s it. There’s not much to it. We find this technique works really well if you’re using something like Autoptimizer to aggregate and minify your site’s CSS – especially on big sites, where you might have three or four plugins that each reference their own installation of Font Awesome.

You can use a similar technique to dequeue (and maybe self-host) multiple references to Bootstrap or other duplicated resources.

Check your site’s HTML, look for duplicated stylesheet and JavaScript assets… just dequeue the ones you don’t want.

Don’t be afraid to self-host CSS assets, instead of just going for a CDN. If your CSS aggregator rolls multiple CSS files into a single CSS file, you’re reducing the number of connections a browser has to make on each page load.

Stay Awesome! 😎

Like This Tutorial?

Upvote this tutorial ---

Downvote this tutorial ---

Let us know