It would be really great if we could have more fonts in our Apps. Google fonts would be a great resource.
Cheers
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('https://fonts.googleapis.com/css2?family=Mulish:wght@600&display=swap" rel="stylesheet">');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round');
.retool-canvas h1,h2,h3,h4,h5 { font-family: 'Mulish' !important; font-weight: 600 !important; }
4 Likes
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.
2 Likes
I've also shared this feedback internally! Maybe we can have better support for custom fonts in the future! 
1 Like