Bricks Version: 1.4 Browser: Chrome 90, Firefox, Safari OS: macOS / Windows / Linux / etc.
On a brand-new WP 6.0 install, Bricks 1.4 appears to have issues with custom fonts.
I uploaded them through Bricks and added several font weights in both regular and italics styles.
Both in the builder and the front end the italics styles do not show up. When I inspect the source code I see the regular font styles in the CSS style sheet but not the italics versions – which explains why the browser simply renders a slanted version of the fonts, but not the actual italics font styles.
Server Environment
Server Info: Apache
MySQL Version: 10.5.15-MariaDB-1:10.5.15+maria~bullseye-log
PHP Version: 8.0.19
PHP Post Max Size: 128M
PHP Execution Time Limit: 180
PHP Max Input Vars: 1000
PHP Safe Mode:
PHP Memory Limit: 1024M
PHP Max Upload File Size: 128M
Not sure I understand the question, though. I registered the fonts the same way I previously did in other installs – when everything worked fine. Below is a screenshot of the current site, which has the issue I described above.
As you see, both fonts and all weights and styles are displayed correctly in the backend.
I did assign the custom fonts in Theme Styles, of course. But it seems that Bricks does not interpret <‘em’>…<’/em’> or <‘i’>…<’/i’> tags as italics for custom fonts, as it should. (I had to add the ‘…’ here because otherwise the forum’s editor would not show the code.)
Again: these tags result in the correct formattting for Google Fonts, so this is appears to be a bug.
The screenshot below shows that, yes, if I force the entire heading to be italic, as you did, then it works. But this is not a solution, of course, because italics are typically used for emphasis, so they need to work for parts of a text element (heading or Rich Text) as well .
Workaround for anyone facing the same issue: add the missing fonts manually via the @font-face rule in custom CSS.
It’s crucial, though, not to use the actual font name but rather the “custom_font_” prefix that Bricks assigns the fonts when you upload them. (Screenshot below.)
Inspect the code on the front end, find the custom font names, then add them in custom CSS.
I was able to reproduce the issue with the Rich Text Element and added it to our bug tracker.
However, everything seems to work normally if you set the rich text element to font-weight 400 (as an alternative to your workaround).
On my site, assigning font-weight 400 to the entire Rich Text element does not seem to make a difference, I’m afraid.
To double-check, I removed my custom CSS, set the font-weight to 400, cleared cache and refreshed the builder as well as the front end – but the result remains the same: Bricks does not display the custom font in italics, unless I set the style to italics for the entire Rich Text element.
Thank you for the update. I wish I could confirm that the issue has been fixed but on my test site things are actually getting stranger.
Now I have to assign both font family and font style in the builder to make sure that custom fonts are properly rendered – even though the fonts are properly assigned in the global style sheet. (And yes, I’ve made sure to update the font settings, since Bricks is now using font names rather than “custom_font_123”.)
I don’t want to go into further details here, for fear of public exhaustion, but if you like I can give you access to the site so you have a chance to investigate this properly.
Hey Carson,
sure! Feel free to send us credentials (help@bricksbuilder.io), a link to this thread, and maybe even a short screencast where you briefly show and explain the problem again. This makes the whole thing a bit easier. Please use the email address you used to buy bricks.
