Dequeue local Font Awesome loaded with @font-face by parent theme

Question

I use Storefront theme. In the following location:

https://mywebsite.com/wp-content/themes/storefront/assets/css/base/icons.css

there is a lot of Font Awesome CSS like this:

.fa-flask:before {
  content: "\f0c3"; }

.fa-flickr:before {
  content: "\f16e"; }

.fa-flipboard:before {
  content: "\f44d"; }

.storefront-product-pagination a[rel='next']::after {
  content: "\f105";
  padding-left: 1.41575em; }

.single-product .pswp__button {
  background-color: transparent; }

There also is a declaration preceded by comment:

/*!
 * Font Awesome Free 5.0.9 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../../../assets/fonts/fa-solid-900.eot");
  src: url("../../../assets/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../../assets/fonts/fa-solid-900.woff2") format("woff2"), url("../../../assets/fonts/fa-solid-900.woff") format("woff"), url("../../../assets/fonts/fa-solid-900.ttf") format("truetype"), url("../../../assets/fonts/fa-solid-900.svg#fontawesome") format("svg"); }

I would like to dequeue / deregister this local Font Awesome and replace it with Font Awesome from CDN source.

I tried this:

add_action( 'wp_enqueue_scripts', 'load_awesome_from_CDN', 999 );
function load_awesome_from_CDN() {

    wp_dequeue_style( 'font-awesome' );
    wp_deregister_style( 'font-awesome' );  

    wp_enqueue_style('font-awesome', '//use.fontawesome.com/releases/v5.8.1/css/all.css');

}

And this:

// Remove and unregister old font Awesome.
function remove_styles(){      
    wp_dequeue_style('font-awesome');
    wp_deregister_style('font-awesome');    
}
add_action( 'wp_head', 'remove_styles', 999);

// Add new Font Awesome.
function load_awesome() { 
    wp_enqueue_style('font-awesome', '//use.fontawesome.com/releases/v5.8.1/css/all.css');    
}
add_action( 'wp_enqueue_scripts',  'load_awesome', 999);

Both result in CDN font being used (checked in Chbrome dev tools): Font Awesome 5 Free Solid—Network resource(1 glyph)

Unfortunately local font is loaded anyway, what Google PageSpeed and GTmetrix show, resulting in CDN link:

https://use.fontawesome.com/releases/v5.8.1/webfonts/fa-solid-900.woff2

And local link:

https://mywebsite.com/wp-content/themes/storefront/assets/fonts/fa-solid-900.woff2

If I include code below in my function, local font isn't loaded anymore, but I lose CSS formatting from whole icons.css file, what is no option, as a lot of important formatting is stored there:

wp_dequeue_style( 'storefront-icons' );
wp_deregister_style( 'storefront-icons' );  

Can I stop local font from being loaded without hacking .css file?

Answer 1

You won't be able to dequeue or unregister such fonts, because enqueueing mechanism doesn't work like that.

Registering a script/style file is like creating aliases for files. So when you do this:

wp_register_script( $handle, $src, $deps, ...)

You're telling WP that you'll be using $handle as a name of given file (and that this file has some dependencies, version, and so on).

When you enqueue a script/style, you're telling WP, that given file (which name has to be registered) should be enqueued (included in HTML output).

The problem in your case is that FontAwesome is not a registered script/style. It's just a part of another CSS file. So you would have to dequeue all that file and put all other CSS code from that file to your own custom file.