4

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?

4

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;
}
  • Thank you for answer! This seems rather like a workaround, doesn't it? Which i did (dirtier i guess) by adding link when theme specific stylesheet is added. I was thinking about something more reusable, like defining enqueue_async_style function, with no success yet. – Anna Oleksiuk Jul 8 '16 at 8:59
  • As far as I know there is no direct filter to add an extra attribute without doing dirty job – bravokeyl Jul 8 '16 at 13:36
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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