Stop Custom Fonts from Blocking Page Render

Feature Requests / Improvements
1

At the moment a website I am working on has custom fonts loading through the Bricks Builder custom fonts library, and unfortunately they are blocking the page from rendering for about 4 seconds(!) while they load.

Screenshot_20240925_060023
Screenshot_20240925_0600231447×821 226 KB

Doing a little searching online, I came across the idea of FOUT (flash of unstyled text) vs FOIT (flash of invisible text) with web fonts. Apparently this was being talked about ten years ago.

Anyway, I was wondering if it were possible to either load local font files (through the Bricks Builder custom fonts system) asynchonously, or to load them with FOUT, as the following dated how-to article explains: How We Load Web Fonts Progressively | Filament Group, Inc.

Also see this doc (by the same author) on loading CSS asynchronously: GitHub - filamentgroup/loadCSS: Load CSS asynchronously

2 Likes
2

An interesting idea :slightly_smiling_face: Have you tried downloading fonts in the woff2 format, which is specially designed for the web.

3

To be honest I’ve been downloading them from Google and they just give me the TTF option.

4

I highly recommend you convert your TTF fonts to WOFF2. They will be tiny vs TTF, the render speed should be much better.
I’ve used this before, seems to work OK;

But yes, if Bricks had some options how to render custom fonts (like the options Elementor), that would be great.

5

Thanks for the suggestion, both of you. I did just come across this article. Perhaps it will help someone else too?

6

I’m leaving this topic open for the developers to find, as it would be nice if they provided ways to improve local font delivery.

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
8

I use this site to download woff2 fonts, maybe it will help: google webfonts helper