So I finished porting a site from Elementor to Bricks, and I’m very happy with everything EXCEPT for the utterly jarring flash of unstyled content on the fonts. It’s really, really noticeable.
I’ve tried offloading fonts via OMGF, but it seems like they’re being loaded by Bricks in such a way that is preventing that from happening correctly (I can get the fonts to pull locally, but they’re still being called from Google when I check the network tab of inspector).
No matter what I seem to do - change hosting, caching, no caching, OMGF on, OMGF off, autoptimize on to disable Google Fonts complete, autoptimize off - it’s still there and it’s so bad I can’t in good conscience put the site live
Here’s a video showing the FOUC, the site ONLY has Bricks active. Zero plugins.
Using OMGF I offloaded the fonts and set to preload, then using Autoptimize I set display to block instead of swap.
Because the fonts are preloaded there’s no flash of invisible text like there would be otherwise.
The new issue is that I can’t disable the external google font calls despite the fonts coming from the local host now.
It would be great if we could have some font handling options within Bricks. Something like:
Disable Google Fonts (on/off)
Font display (auto/swap/fallback/block)
Serve Google Fonts locally (font family, type and weight selector to choose which fonts get copied into a directory like bricks/local-fonts and have the style sheet updated accordingly)
That would all be spectacular, but at the very least the option to turn off Google Fonts and let us manually do the rest with OMGF would be almost as good!
Sure. Is there any way to share with you privately?
It’s the display:swap that’s causing the issues from what I can tell. Forcing display:block and preloading the fonts via Autoptimize and OMGF stops the flashes (but the fonts are still being called from Google later on in the waterfall despite being loaded already locally)
Hi, @luistinygod ,
My “Webfont Loading Method” use Webfont Loader (JS), anything is fine. But when I use some speed optimization plugins(wprocket and SiteGround Optimizer) and still Flash, should I exclude some js or css file from minifying or lazy loading?
Update: I found that the “Combine JavaScript Files” feature makes the “Webfont Loader (JS)” useless even if I exclude “/themes/bricks/assets/js/libs/webfont.min.js”
If you are using the Lazy Loading mechanism provided by WP Rocket or SG optimizer please disable the Bricks lazy loading mechanism under Bricks > Settings > Performance.
