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

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 );