CSS urls block rendering

The quickest way to get the Webfont with CSS technology loaded in a non render-blocking way is probably to use a Font Awesome Kit. A kit loads the CSS asynchronously.

Is that an option for you?

Hi @xizor,

Ah, it looks like there’s one more step that would need to be taken to get the Kit to load in a non-render blocking way, and for a tool like Google PageSpeed Insights to report as such: add the defer and async attributes to the kit loader script tag.

The CSS itself is loaded by the kit script asynchronously.

Here’s a code snippet that could be added to a theme’s functions.php, for example, to add the defer and async attributes to the Kit loader script tag that is created by this plugin:

function fa_js_async_defer($html, $handle) {
	if( defined('FortAwesome\FontAwesome::RESOURCE_HANDLE') && FortAwesome\FontAwesome::RESOURCE_HANDLE === $handle ) {
		$revised_html = preg_replace(
			'/<script[\s]+(.*?)>/',
			'<script defer="true" async="true" \1>',
			$html
		);

		return $revised_html;
	}

	return $html;
}

add_filter(
	'script_loader_tag',
	'fa_js_async_defer',
	11,
	2
);