SOLVED: Pasted HTML/CSS puts variable in font select box and can't remove it

Bugs
1

I had a small design in plain html with block and I copy/pasted it into Bricks. It created the element tree just fine with class names attached and some styles set in the style panel. Everything was fine.

One thing that it did was create a variable which it then put in the font selection box, like this:

20260709 screenshot02
20260709 screenshot02417×119 6.71 KB

I can’t erase this variable. It’s not in the dropdown list and I can’t type in the box manually. So if I select a font, it will use that font, but if I erase the font selection, it defaults back to this variable again.

I can’t find where this is happening. It’s not the default font in the global styles, that is set properly. There’s no custom CSS or code on the page.

I don’t know how Bricks parsed the html/css into this variable in the first place. The variable doesn’t exist in the variable manager. Nevertheless it’s stuck in here. How do I clear it out? How is there even a variable reference here? I can’t type a custom variable here if I wanted!

There are no custom fonts added to this site. The default font is Arial, set in global styles.

What’s going on?

3

Hi Zack,
Thanks for your report!

Without having the pasted HTML/CSS on hand, I can of course only speculate, but this clearly looks like an inherited placeholder, not an element setting. Accordingly, you can’t clear it.

Please provide us with the HTML, or send us your login credentials and a link to this thread so we can get to the bottom of the issue.

4

I don’t think it’s just a placeholder because it is literally setting the var() in the CSS output as well:

20260713 screenshot01
20260713 screenshot01332×186 18.6 KB

I tried to find the original HTML I used when copying into Bricks but it’s long gone now.

I’ll DM you.

6

Thanks for the login details! Actually, the problem is very easy to reproduce if you paste something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>

    .font-two {
      font-family: var(--my-font);
      font-size: 18px;
      color: #555;
    }

  </style>
</head>
<body>

  <div class="font-two">
    <p>Font two</p>
  </div>

</body>
</html>

Here, the font-family value is set to a variable, which shouldn’t be possible because it’s currently not possible to define font-family as a variable (unless you use custom CSS).

Accordingly, the font-family setting should be placed in the custom CSS, but not in the font-family dropdown.

We’ll update this thread once it’s fixed.

1 Like
7

We’ve addressed this in Bricks 2.4-beta3 (beta release), now available for manual download from your Bricks account.

Please read the changelog entry before testing, and let us know if you experience any issues. Note: beta builds are not recommended for production sites.

1 Like