SOLVED: Font Variation Settings are not being removed from Theme-Style.CSS when deleted from builder

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

I’m using a variable version of the font Inter. In the Theme Styles under Typography > Headings on both H1 and H2 Ih set font-variation-settings: “wght” 900

Sometimes on certain headings I want to change the font weight. I then realized that the control for “font-variation-settings” will only appear if I specificaly choose the font family on that element. It doesn’t not appear when the font family is inherited.

So to avoid re-choosing the font family on every individual element, I went back to the Theme Styles, deleted the font-variation-settings: “wght” 900 and switched to just font-weight: 900. However, the font-variation-settings persisted in the CSS file even after turning off caching and regenerating the CSS stylesheets in the Bricks settings. So now even if I set an H1 heading to font-weight: 100 on the ID, it still shows up as with a weight of 900 with both font-variation-settings: “wght” 900; and font-weight: 100 showing up in the stylesheet.

I did figure out why this happened, I just feel like it shouldn’t happen this way and is likely the souce of my and my other people’s frustration with CSS in Bricks. When I went back to delete the font-variation-settings, I did not specifically delete the text out of the box, I hit the X next to the typography setting for both H1 and H2 in the Theme Style settings, thinking this reset the styles completely.

This time I set the Inter font-family on the All Headings setting, and then set the font weights individually on H1, H2, H3, etc., but because I didn’t specify a font-family on each of those settings, I could not see or access the font-variation-settings. Only when I reselected a font-family in the Typography settings for each individual heading did the font-variation-settings box re-appear still containing the “wght” 900 that I thought had been deleted.

I feel that if you’re using display conditions to hide several controls from the builder when we delete a certain setting, that the styles contained in those hidden controls should be deleted as well. It’s quite challenging to track down these phantom styles after the fact. It can be incredibly frustrating when settings we add in the builder UI are being overridden by CSS that we can’t even see and have no idea where it’s coming from.

Hi @MadeFreshDesign,

Yup you’re right the font variation setting should either stay visible or just not take effect as it’s hard to know what’s going on. I added this to our internal bug tracker.

It would be nice to be able to control the font variation settings on an element that’s inheriting its font family from the global theme styles. If we have to re-declare the font on every element it becomes a huge pain if we ever decide to change fonts.

Also, I don’t think this is the only place where styles stick around after it looks like they were cleaned. I’m pretty sure it happens with links or anything else with multiple dependent fields that are hidden when something else is empty.

Hi Brian,
We’ve fixed this issue in Bricks 1.9.6, now available as a one-click update in your WordPress Dashboard.

Changelog: Bricks 1.9.6 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse