CSS not working for custom fonts on text elements, whyyyyy :(?

So my app lets users choose from a few fonts. I was first using conditionals to change font dynamically (which awfully results in having to add one conditional per font, so I ended up with like 50+ conditionals…). Works like this, super simple:
Captura de pantalla 2024-02-14 094418

But that’s obviously wayyy too many conditionals.
So from there, I discovered someone’s better solution through some fabulous css to apply to my text elements so I wouldn’t have to do this manually…:
Captura de pantalla 2024-02-14 094403

But the problem is, the css only works for some fonts and I don’t know why :frowning:

These are the elements that show the right font when using conditionals:
Captura de pantalla 2024-02-14 094224

When only the CSS/html element acts on the texts, to my surprise none work right. I don’t know why… It definitely “changes” the original font but not to the actual font, just some weird default font… why? I did notice however that the CSS worked with the font “Jura”, but none of the other 50+ I added… they all look like this: :frowning:
Captura de pantalla 2024-02-14 094209

I don’t know the solution or why this is happening. Maybe the fonts aren’t downloaded or something? Which, is odd because they’re in the bubble editor. I don’t know. Either way I’m determined to add these fonts so, I’d be largely thankful if someone saved me from doing 250+ hellish conditionals :slight_smile: haha…

In your screenshot the colon is missing after #fonttrial

Huh? What do you mean? The entire ID usually goes something like “fonttrialNosifer” for example, or “fonttrialMontserrat” depending on that option’s font name (I used a set of options).

Do you mean it should be “fonttrialMontserrat:”?

Ah, ok I see it.

I think it doesn’t work for font names with spaces in the name.

I don’t know I don’t think that’s the case… Some single word fonts don’t work so I don’t know. Actually, I was adding the conditionals either way to make it work (turned out to be 200+ indeed lol, still not finished.) and I noticed the fonts changed as I scrolled up and down? And now, some fonts work too? But it’s weird, because I only actually configured the first 5 or so in the conditionals. Now randomly more are working. It makes no sense… and I don’t code so, I’m… lost… haha.

You can see below and compare how some fonts work for some texts without the conditionals being set up right, so it has to be the CSS but then it makes no sense?

Actually, I just realized more. That as I scroll down (because the repeating group doesn’t load fully initially) and more cells load, the fonts change a bunch of letters to some font of the ones further down the list without the conditionals set up…

Any ideas? Or workarounds to change font dynamically are appreciated :slight_smile: my app already crashes a lot so its a little wild for me to add this many conditionals (which total will be 200 per element or 600 extra total xD) but I have no other way really. All input appreciated and massively :)!

It sounds like you’re potentially suffering from some issues with the repeating group’s setup, as opposed to the CSS (which looks fine).

If you’re willing to share your app I can take a quick look, otherwise just seeing a preview page may shed some light.

1 Like

Oh by all means, I welcome all help it is very much appreciated thank you :slight_smile: I will message you then

This topic was automatically closed after 70 days. New replies are no longer allowed.