Super confused with changing fonts, font size, colours etc

App Building
1

I'm coming from Bubble where virtually every element from text to a button lets you just pick the font and sizing etc like you're working in Word. I'm not sure why but I cannot figure this out in Retool. What makes me even more confused, is any time I google how to do this, it seems like I'm supposed to use custom CSS, yet there's warnings everywhere in Retool saying: Add custom style overrides for this app. Use with caution as classes and DOM structure may change as new features are introduced. Set styles in the component inspector when possible.

Which then makes me feel like this is NOT the correct way. I'm not looking for anything complicated. For example I have this button:

image

The inspector shows the element ID as #retool-widget-button5. I want to make the font significantly larger, same with the icon as it's tiny. I tried under custom CSS:

#retool-widget-button5 {
font-size: 20px;
}

But nothing happens. Using Custom CSS is super tedious as it only seems to work sometimes. I feel like fonts, font size, etc are all super basic things so I'm not clear on what I'm missing.

It says "Set styles in the component inspector when possible." but what does that mean? If I click this button and go to the component inspector I must be blind as there's no mention of font, size, even CSS here.

Styles under the component are always just colours but never fonts or font size.

2

Hey @Psycho_Bunny, welcome to Retool. I'm also a Bubble user and I must agree. Setting fonts, fonts sizes and colors are such basic things we are missing in Retool.

I myself try NOT to use any custom CSS in my app. It's also not my job to know CSS if I'm using Retool :sweat_smile:

@retool-team, this is an urgent matter :pray:

3

It's just confusing because when I use ChatGPT or other AI asking how to do it, they always say use the custom CSS feature of Retool, yet as mentioned in my original post Retool itself says you shouldn't use custom CSS. I'm not clear on if Retool is more for the "app" itself vs esthetics of it or what, but I'm surprised it's not easier or more documented. The help documentation is so basic on this topic, but I'm also not a web developer so maybe it's easier to someone that is.

Bubble we used for years, but ironically the thing I didn't like about it was it was TOO customizable! I always hated how even something like a table required you to physically create the headers, and you couldn't resize them or whatever, vs Retool where you just pick the columns and call it a day. I'm just finding Retool is sort of the opposite in that it seems too strict.

1 Like
4

Hey there! Retool doesn't have a lot of built-in font control at the moment which is likely why you're seeing so many suggestions to use custom CSS :pensive: You're right though that custom CSS isn't a good long-term solution for most styling issues. The dev team is aware that custom fonts are a huge part of styling apps to look the way you want them to and they're looking at ways to add more typography support toward the end of this year.

1 Like