Installed Bricks 1.6 beta today on https://diespitze-coaching.de/. Since then, when logged out, the font, “Brawler” that I use as my body font won’t load on the front end unless I disable CSS minification in WP-Optimize.
I think the problem is related to the loading order. The minified CSS is loaded after your child theme style.css and overwrites it. You can try increasing the priority of your stylesheets (see the 20 at the end). If 20 doesn’t work, increase it by ten.
/**
* Register/enqueue custom scripts and styles
*/
add_action( 'wp_enqueue_scripts', function() {
// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
if ( ! bricks_is_builder_main() ) {
wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
}
} , 20);
Hey @timmse, thanks for this! I added the snippet to functions.php but no dice.
The thing that throws me off most is that his happens even though I’m specifically excluding style.css from minification in the WPO settings. Eagerly awaiting the WP-Optimize team’s response.
Meanwhile, can you see any other cause and/or fix for this?
EDIT: increased by ten, also disabled and re-enabled WPO and its features.
Ohh, how nice! For some reason, that wasn’t on my radar. I had manually uploaded the fonts (which I got using Webfonts Helper) to wp-uploads/fonts and put the CSS for them into the child theme’s style.css.
I just un-did all that and re-implemented the fonts using the Bricks-native methods described in the article you linked.
I also used WPO to clean the whole database, then reset WPO’s settings to factory defaults, uninstalled WPO and re-installed it (after re-implementing the fonts as described above). Re-configured WPO from scratch. No dice. Same result.
The “Brawler” font won’t load, while the “Sora” font used for headings does load. Font sizes for body text are off, and background pictures aren’t loading either.
Also told the WP-Optimize team about this.
I’m really baffled. I have three other Bricks builds and they’re all perfectly compatible with WP-Optimize. Only this one decided to go nuts out of the blue a few days ago.
UPDATE: something about Bricks 1.6 beta has issues with WP-Optimize’s minification. Here’s a live recording of me installing Bricks 1.6 beta for the very first time on a build that has been working flawlessly with Bricks 1.5.x and WP-Optimize for more than a month:
You can see that immediately after I install 1.6 beta, the layout starts breaking. This video is unedited and it shows only what I found on the front page immediately after installing 1.6 beta, clearing Minify and Cache in WPO and disabling, then re-enabling both features.
I just tested it on our DEV server with Bricks 1.6 Beta 2 and used the same settings as you. I don’t get any errors in the console and the custom fonts are displayed as they should be (included via the Bricks way).
This is what the website should look like (and does, with WPO disabled):
I tried the same on bricks.2sinn.it (the one from my video above, where I installed Beta 1). That one works now with Beta 2 and WPO Minify and Caching enabled!
I’m getting the impression there is some wrench somewhere in the gears of https://diespitze-coaching.de. It’s not just that fonts won’t load, it’s almost all images as well, including the logo in the header, and the Amelia booking widget at the end of the page, too.
I’d hate to run that site without WP-Optimize. I left the plugin enabled for now, perhaps you can head over there and see if there’s anything you can glean from it?
Hi Matt, just a few sidenotes that might be of interest whilst they try to debug your issue.
As a temporary measure and what could be a Worst/better-case scenario? Is to offload the minification to Cloudflare. Let CF take the processing hit rather than your server.
Also, just in relation to your initial settings,
I would not select option 2 (enable merging of CSS files - in other words combining CSS files) in most cases, this will slow your website down with no real cases of speed improvements.
Here is a good read from GTMetrix about it (equally, an even newer standard is very close to full adoption too )
Hi Matt,
The “import” js problem is probably caused by WP Amelia. It may be that the minification fails and one or the other Bricks JS no longer works (such as lazy loading, which would explain the not showing images). You can deactivate lazy loading (and/or Amelia) and see if something changes.
Thanks for these suggestions to both of you! Indeed, once I disable Amelia, almost everything works fine again. Only the body font doesn’t load, but I’m gonna burn that bridge when I get to it. For now, I submitted a support ticket to Amelia and hope they can come up with a fix.
Also, thanks for suggesting Cloudflare. I’ve had CDNs on my radar for quite a while, but never got around to exploring that world. This project might well be the right one for me to take the jump and familiarize with Cloudflare. I’m gonna prioritize meeting the launch deadline first.
Hello, Bricks team! The Amelia support team was able to point me to a .js file to exclude from minification, which fixed most of the problems. However, now we’re back to the original problem from my first post:
When WPO Minify is enabled, the body font “Brawler” won’t load, even though now, I have implemented both fonts (Sora for headings and Brawler for body) using the Bricks Custom Fonts UI. No matter what files I exclude from minification or which settings I choose in either Minify or Caching, Brawler doesn’t display.
In addition, the console comes up with this bewildering message even when WPO is completely disabled:
You can see the issue on https://diespitze-coaching.de/; I have WPO enabled with the problematic Amelia file on the exclude list, and all features configured as described in my OP.
I’m hoping you can help me fix this one final problem as well.
Hi Matt, sorry me again, haha; while Stefan returns, it might be worth ruling out a corrupt font.
This is a site I now use for my variable font weights. It also has the standard font weights.
It was recommended in the FB group, and I believe it has been curated OXY user called Matt Hias, who is well-regarded over there. He created the directory because of his experience with corrupt fonts, and he keeps this up to date.
I have checked, and the Brawler font is there and was updated on the 22 Sept this year.
I would delete the current set you have and then create a fresh set with the newly uploaded fonts.
Anyways, just thought it might be worth a try whilst waiting for a reply.
Hey again, thanks for this suggestion! I will definitely check it out tomorrow. It looks a bit like a new alternative to our good old workhorse, Webfonts Helper?
Hey @Michael, I’m afraid the Web Font Loader doesn’t work. None of the downloaded .woff or .woff2 files actually contain anything. When I open them in a font viewer, the preview window is completely blank, and when I add them to my website build, a default serif fallback font displays instead. Odd. It sounds like a cool project.
Hmmm, I deleted everything again and re-uploaded two fonts, “Rokkitt” and “Merienda” this time. I also completely disabled and deleted WP-Optimize to make sure there’s no interference at all.
I set “Merienda” as heading font and “Rokkitt” as body font in Theme Styles. They display fine on the front end, both when logged in and logged out. However, they don’t display when I launch the builder. I still get serif fallbacks.
I’m completely at the end of my wits. I have no idea what’s happening, all I know is I’ve easily sunk 10 hours into this now that I can’t ask my client to pay me for This is insane. It shouldn’t be so hard to use custom fonts.
Ignore the Custom Fonts functionality baked into Bricks. Instead try to use this snippet by Matthias Altmann. He is the guy who provides the Webfontloader. Super easy to implement and use. And very well explained:
)
This is insane. It shouldn’t be so hard to use custom fonts.