I'm trying to build a custom HTML component that uses the
font-size CSS property.
However, it seems like Retool doesn't properly render
font-size as a CSS property in the custom HTML component.
When I open the html/css file locally, the font renders exactly as it's supposed to but when I render it in the HTML custom component it does not, see below:
Opening the HTML file locally
The HTML component with the same code in Retool
Is this a bug, or is there something I need to do special in Retool?
Hi @cary.snyder_umbra! Are you using a heading tag for your title, perhaps? Retool has some default font sizes applied to headings inside the HTML component that may be taking precedence (you can inspect the styles in your browser's dev tools to confirm). To work around this, having a more specific CSS selector or adding
!important after your font-size style definition may fix it
Thanks, good to know that Retool has default fond sizes to various HTML components.
I fixed this by removing the
<p> tag around the text and reordering the CSS.