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:
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.
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 
@retool-team, this is an urgent matter 
1 Like
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
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 
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.
2 Likes
Would love to see better design tools, as well. As it's now a new year, I'm curious if there is any update on this?
2 Likes
Hey there! Chiming in here to speak to some recent ships and planned work related to Styling & Theming!
In the past few months we've added the following functionality:
- App-level themes (previously Themes were only defined on an org-level basis for Business/Enterprise plans)
- Typography support within themes -- importing a custom typeface for an app + default font sizes for body text + h1-6
- Allowed margin and padding to be more granularly configured via fx mode
- Exposed more style options for components / improving consistency across similar components
- Added support for a "line" style variant to the Tabs component
We're also currently working on a refresh of the current Themes offering to give organizations more power over component-level styles to better support their design systems. More on that to come in the next few months!
As always, would love your feedback/requests for further improvements here! Some other feature requests that the team is aware of and consider high priority include:
- Component-level typography controls (font size, weight, line height, typeface, etc.)
- Expanded Markdown support for text in components
- More granular spacing controls for components
- Elevation
1 Like
Hey @mckenna - this is great to see a good amount of progress, but I'd love to see more granular control over individual text elements within components as well. For instance, I'd really love to have the font size in a table larger than the content within a table. Maybe there's a way to do this that I'm unaware of (or with custom CSS), but that is the kind of flexibility and styling that I'd really love.
@Chris_Doty it's in the works!
1 Like
