Get Font Awesome working in Firefox

Are you using Font Awesome in your WordPress website and have noticed that some icons don’t display in Firefox? I noticed exactly the same today where icon fonts showed perfectly in Chrome and Edge browsers but there was a flashing question mark in place of the icons in Firefox.

Why Font Awesome doesn’t work with Firefox

First off, let’s be clear that the issue with Font Awesome and Firefox is restricted to websites that load Font Awesome via a CDN. The reason for the issue is CORS and how it’s implemented in Firefox. There isn’t a fault with the implementation in Firefox but rather is a security precaution.

The safe way to get Font Awesome working in WordPress

The safest way to get Font Awesome icons to display consistently between browsers is to serve Font Awesome from your hosting server. Because the Font Awesome files will be served from your domain, the CORS issue won’t occur. In addition, we aren’t inadvertently weakening our website security.

Follow these steps to install and serve the Font Awesome files from your domain and have Font Awesome icons display in Firefox.

1. Download the Font Awesome files and unzip.
2. Load the files as unzipped to your server (in this example I saved the files to //srv/htdocs/wp-content/uploads/fontawesome).
3. Save the script as below to your functions file.

// Register Script
function FontAwesome() {

	wp_register_script( 'FontAwesomeBrands', '//srv/htdocs/wp-content/uploads/fontawesome/js/brands.min.js', false, false, true );
	wp_enqueue_script( 'FontAwesomeBrands' );

	wp_register_script( 'FontAwesomeSolid', '//srv/htdocs/wp-content/uploads/fontawesome/js/solid.min.js', false, false, true );
	wp_enqueue_script( 'FontAwesomeSolid' );

	wp_register_script( 'FontAwesomeShims', '//srv/htdocs/wp-content/uploads/fontawesome/js/v4-shims.min.js', false, false, true );
	wp_enqueue_script( 'FontAwesomeShims' );

	wp_register_script( 'FontAwesomeFA', '//srv/htdocs/wp-content/uploads/fontawesome/js/fontawesome.min.js', false, false, true );
	wp_enqueue_script( 'FontAwesomeFA' );

}
add_action( 'wp_enqueue_scripts', 'FontAwesome' );

In the script I am loading the free Font Awesome files only in addition to the shim file.

Fix: Keep loading Font Awesome via CDN

It is possible to add some script to the .htaccess file on your server in order to have Firefox load Font Awesome from a CDN. I don’t like to override security settings therefore prefer to host the Font Awesome files locally; the option however is available to bypass the CORS limitation of Firefox loading Font Awesome from a CDN.

If you do want to keep using the Font Awesome CDN then adding the following to your .htaccess file should overcome issues displaying icons in Firefox:

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>