Stop Custom Fonts from Blocking Page Render

Feature Requests / Improvements
7

Bricks don’t optimize render blocking resources.
I load only 2 fonts by default custom font Bricks manager.
The rest of fonts are loaded delayed on user interaction or 5 seconds.
My similar topic: Eliminate render-blocking resources
And on facebook: https://forum.bricksbuilder.io/t/file-bricks-min-js-inline-into-footer/26383

<script>

'use strict';

const autoLoadDuration = 5; //In Seconds
const eventList = ["keydown", "mousemove", "wheel", "touchmove", "touchstart", "touchend"];

const autoLoadTimeout = setTimeout(runScripts, autoLoadDuration * 1000);

eventList.forEach(function(event) {
	window.addEventListener(event, triggerScripts, { passive: true })
});

function triggerScripts() {
	runScripts();
	clearTimeout(autoLoadTimeout);
	eventList.forEach(function(event) {
		window.removeEventListener(event, triggerScripts, { passive: true });
	});
}

function runScripts() {

	/**
	 * Loading CSS contains font face definitions
	 */

	const fontslink = document.createElement( 'link' );
	fontslink.id = 'fontslink';
	fontslink.rel = 'stylesheet';
	fontslink.href = 'REPLACE-YOUR-PATH/wp-content/themes/bricks-child/styles-fonts.min.css';
	document.head.appendChild(fontslink);

}

</script>
1 Like