ricardozea
7/16/2018 - 2:37 AM

"CSS is treated as a render blocking resource, which means that the browser won’t render any content until it’s finished loading. So this wo

"CSS is treated as a render blocking resource, which means that the browser won’t render any content until it’s finished loading. So this works great if you’re using fonts from something like Google Fonts or Adobe’s TypeKit, you don’t need to be wait

proper-font-load.html
content_copyfile_download
<noscript id="deferred-styles">
	<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,300i,700,700i" rel="stylesheet">
</noscript>
<script>
    // Load CSS
    var loadDeferredStyles = function() {
    	var addStylesNode = document.getElementById("deferred-styles");
    	var replacement = document.createElement("div");
    	replacement.innerHTML = addStylesNode.textContent;
    	document.body.appendChild(replacement)
    	addStylesNode.parentElement.removeChild(addStylesNode);
    };
    var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);
</script>