How to add extra attribute to stylesheet link?

Question

Following Keith Clarks advice, i'd like to load my fonts asynchronously. I try to achieve that by adding:

wp_enqueue_style( 'font-awesome', URI . '/fonts/font-awesome/css/font-awesome.min.css' );
wp_style_add_data( 'font-awesome', 'onload', 'if(media!=\'all\')media=\'all\'');

to my scripts.php file, but apparently this argument is not well taken by that function, because there is no onload attribute. How properly can I do that in WordPress?

Answer 1

We can use style_loader_tag filter to filter the link that is being output.

Here is the filter:

$tag = apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n", $handle, $href, $media);

Here the link $handle for which you want to add attribute is font-awesome so if the handle, so you can replace font-awesome-css with extra info.

add_filter('style_loader_tag', 'wpse_231597_style_loader_tag');

function wpse_231597_style_loader_tag($tag){

    $tag = preg_replace("/id='font-awesome-css'/", "id='font-awesome-css' online=\"if(media!='all')media='all'\"", $tag);

    return $tag;
}

Answer 2

If you're going to be deferring more than one stylesheet, I've found this approach to be fairly reusable.

1. Put this somewhere:

function _changeme_defer_css( $html, $handle ) {

    $deferred_stylesheets = apply_filters( 'changeme_deferred_stylesheets', array() );

    if ( in_array( $handle, $deferred_stylesheets, true ) ) {
        return str_replace( 'media=\'all\'', 'media="print" onload="this.media=\'all\'"', $html );
    } else {
        return $html;
    }

}
add_filter( 'style_loader_tag', '_changeme_defer_css', 10, 2 );

2. Load your font as you normally would:

function _changeme_load_font_awesome() {
    wp_enqueue_style( 'font-awesome', URI . '/fonts/font-awesome/css/font-awesome.min.css' );
}
add_filter( 'wp_enqueue_scripts', '_changeme_load_font_awesome' );

3. Defer it like so:

add_filter( 'changeme_deferred_stylesheets', function( $handles ) {
    $handles[] = 'font-awesome';
    return $handles;
}, 10, 1 );

4. If you want to make sure it only impacts the public-facing side of your site, and not wp-admin, you could add a check for ! is_admin() as well (especially for commonly-used libraries like Font Awesome or Select2):

add_filter( 'changeme_deferred_stylesheets', function( $handles ) {
    if ( ! is_admin() ) {
        $handles[] = 'font-awesome';
    }
    return $handles;
}, 10, 1 );

I also updated the onload approach based on Scott Jehl's The Simplest Way to Load CSS Asynchronously (2019) but if you're going to do this, you may also want to read the "Async CSS" passage from Harry Roberts's The Fastest Google Fonts (2020) to see why he recommends preloading as well.

Answer 3

I really understand both of you, but I would like to point out that following Keith Clark's advice is just following another bad practice. I also understand that this is asked and answered in 2016 and that most things change for better or worse.

If you need to delay a stylesheet, then I would recommend you the following:

// I use get_footer to put my stylesheets in the footer
function add_footer_styles() {
    // Example loading external stylesheet, could be used in both a theme and/or plugin
    wp_enqueue_style( 'font-awesome-5', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', array(), null );

    // Example theme
    wp_enqueue_style( 'font-awesome-5', get_theme_file_uri( '/assets/css/fontawesome.min.css' ), array(), null );

    // Example plugin
    wp_enqueue_style( 'font-awesome-5', plugins_url( '/assets/css/fontawesome.min.css', __FILE__ ), array(), null );
};
add_action( 'get_footer', 'add_footer_styles' );

Integrity and crossorigin
If you add Font Awesome 5 externally I would also recommend using integrity and crossorigin, see my other answer for a more detailed take on adding attributes: How to add crossorigin and integrity to wp_register_style? (Font Awesome 5)

function add_font_awesome_5_cdn_attributes( $html, $handle ) {
    if ( 'font-awesome-5' === $handle ) {
        return str_replace( "media='all'", "media='all' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'", $html );
    }
    return $html;
}
add_filter( 'style_loader_tag', 'add_font_awesome_5_cdn_attributes', 10, 2 );