1

Since the google speed insights report suggests adding a

to speed up the loading of the following resources

https://www.beautyandhealthspace.com/wp-content/plugins/js_composer/assets/lib/bower/font-awesome/fonts/fonts/fontawesome-webfont.woff2?v=4.7.0

I am wondering how could I possibly achieve that!

More concretely, I've thrown a glance to the header.php file of both the main and the child theme, but since they are coded in PHP I can't really figure out on my own how to add any HTML to it.

There should be for sure a way to inject HTML into the webpage by means of recurring to some php-function in the header.php file. I'm very far from being a developer.

1
  • You can add HTML to your header.php - it's not easy to offer more advice than that considering you haven't provided any of the code or explained what HTML you would like added. I'm also struggling to understand what adding HTML to your header.php and the first part of your question have in common? Are you looking to manually add the rel="preload" to that font? May 17 '20 at 22:33
1

If your theme is any good it will use wp_enqueue_style to include fonts in the head of your site. This gives you access to the style_loader_tag filter, which you can use to modify the html of the font link. Like this:

add_filter( 'style_loader_tag','wpse366869_preload_styles', 10, 4 );
function wpse366869_preload_styles( $html, $handle, $href, $media ) {

    // do this only when 'fontawesome-webfont' is mentioned in the html
    if( 0 != strpos( $html, 'fontawesome-webfont' ) ) {
        $html = str_replace( '<', '<rel="preload "', $html );
    }
    
    return $html;
}
2
  • In row 4, there is a missing closing bracket. Jul 27 '20 at 8:06
  • thanks, fixed it
    – cjbj
    Jul 27 '20 at 9:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.