IMPLEMENTED: Stop Custom Fonts from Blocking Page Render

[GrowPlugins]

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.

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

[parktechno]

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

[GrowPlugins]

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

[webguy]

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;

TTF to WOFF2 | CloudConvert

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

[GrowPlugins]

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

How to Convert Font Formats to WOFF under Linux

[GrowPlugins]

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.

[MarekKmiecik]

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>

[BEO888]

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

[timmse]

We’ve added a “Preload custom fonts” setting (Bricks » Settings » Performance) in Bricks 2.0 RC2, now available as a manual download in your account (see changelog).

Please let us know if you are still experiencing issues.

As with any pre-stable release, please do not use it on a production website. It is intended for testing in a local or staging environment only.

[erinreye707]

i am still having issues with this lol
i have enabled preload custom fonts. i have woff2 for my 2 fonts saved to bricks…

[timmse]

Hi Erin,
The screenshot shows nothing at all regarding custom fonts

However, you seem to be using quite a lot of icon fonts (fa brands, fa, ionicons) which you might want to replace with SVGs.

[erinreye707]

i am using ONLY 2 fonts that i uploaded to bricks, these are from iCONS? which i also removed? but for some reaason every page style sheet loads on every page? i have tried wp rocket to optimize but can’t because bricks breaks on my amelia booking/woo sites.

this is what i am saying. if you use an icon box, even with icons removed after, it loads the full icon set of fonts every single page every time. i can’t figure it out. ny homepage is right there in the parentheses lol

there’s certainly no woo commerce elements.
i don’t get it

[erinreye707]

and yes, got the memo about the svgs - Icon Improvements - Loading - Icon Element - Library - #4 by erinreye707

seems crazy still about the loading the entire site element load on every page vs just what’s on that page… i also am n00b so

[timmse]

You are mixing up various topics, which will probably lead to even more confusion.

This thread is not about icon fonts, custom icons or anything else, but about preloading custom fonts, i.e. the custom fonts (not icon fonts or google fonts) that you use on your website and that you have uploaded manually. These can now be preloaded. That is the content of this feature request.

As far as loading the icon fonts is concerned in your case: as long as an icon of an icon font is set, it will of course be loaded. If it is in the footer, as it is on your website (you’re using font awesome brands and iconicons there), it will be loaded on every page, since the footer shows on every single page.