Include Google Fonts as choice

It would be really great if we could have more fonts in our Apps. Google fonts would be a great resource.


1 Like

Agreed that it could be a nice option but it's already possible now using preloaded css:

add an import statement and then apply that font to your retool canvas element - I've used it lots, and with icons too

@import url('" rel="stylesheet">');
@import url('|Material+Icons+Round');
.retool-canvas h1,h2,h3,h4,h5 { font-family: 'Mulish' !important; font-weight: 600 !important; }


Hi @dcartlidge
Yes, that's the route I eventually used for this. Thank you for sharing.

1 Like

How did you get the fonts to work?

Using that code sample exactly as-is - I put that in the preloaded css field in settings->advanced for my org

I was just playing with this and you can also change the fonts for other parts of the page.

@dcartlidge's example changes all of the headings in a Text component where you use markup hashes # (maybe other places as well?)

I can change the table headings this way:

.retool-canvas .column-title { font-family: 'Mulish' !important; font-weight: 600 !important; }

This changes my tabs: (my tab set is named tabs2):

.retool-canvas #retool-widget-tabs2 * { font-family: 'Gluten' !important; font-weight: 600 !important; font-size: 24px}

If you can figure out the proper CSS, you can change a lot. But also beware that Retool can change the ids and class names at any time and break your CSS.


I've also shared this feedback internally! Maybe we can have better support for custom fonts in the future! :crossed_fingers:

1 Like