How can I change the font across all of my apps/ dashboards?

Queries and Resources
1

I am using the cloud version of Retool and would like to use a custom font for my dashboards/ projects/ apps.
The font I would like to use can be fetched via a CDN link.

<link href="https://fonts.cdnfonts.com/css/tisa-sans-pro" rel="stylesheet">

How can I change the font of all the components, across all of my dashboards?

1 Like
2

try this Use Google Fonts

3

Thanks. Will I have to reference the font every time I want to use it? Is there no way for me to default to that font instead?

4

Hey @krynv

You can add CSS that applies to every one of your apps in the advanced tab of your settings page!

2452×846 84.7 KB

1350×672 102 KB

Can you let me know if that does what you're looking for?

3 Likes
5

Thanks, this works.

For the font I wanted to use, I had to use the following code:

@import url('https://fonts.cdnfonts.com/css/tisa-sans-pro');

.retool-canvas * {
  font-family: 'tisa sans pro', serif !important;
}

Note the font-family tisa sans pro - just had to double check what the actual font was declared as in the URL: https://fonts.cdnfonts.com/css/tisa-sans-pro

3 Likes
6

image
image1332×687 59.3 KB

I would like to thank everyone for the post, I am finalizing the apps, finally (hooray!), and would like to share the css I used created with Copilot.

image
image814×274 94.3 KB

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');

h1,h2,h3,h4,P{font-family: "Open Sans"!important}

.retool-canvas * {
  font-family: 'Open Sans', sans-serif !important;
}
1 Like