Custom font in the Retool

💬 App Building
,
1

  • Goal: Use custom font in the Retool app

  • Details: Retool is a new tool for us, we are trying to build an app for our customers who work in the food delivery industry. We want this app to match our brand guide in terms of colors and fonts. We were able to achieve the result we wanted with colors and layouts but we are struggling with applying our font to the app. We have a link that leads to our font, is there a way of applying this font to the app?

2

Hello @Foody_App Welcomw to Retool Community,

To apply a custom font in Retool, follow these steps:

  • Go to Settings → App Theme → Typography → Fonts .
  • In the Fonts section, you can import a custom font by adding a URL. Once imported, you can apply the font to your Retool app's typography settings.

image
image1012×608 70.9 KB

2 Likes
3

you can connect custom fonts in 2 ways:

  1. Visit settings -> App them -> Typography. Here you can select fonts and add URL to your font and specify Font weights.
  2. Go to Custom CSS and add following code
@font-face {
    font-family: 'Test';
    src: url('URL-to-your-font') format('woff');
    font-weight: normal;
    font-style: normal;
}

replace URL-to-your-font with the actual URL. In our case, we had several .woff files provided by our designer, in order to get a link we host them on our s3 bucket with public view permissions.

Hope it helps

1 Like
4

thanks guys for your answers.
@Aleksandr_Tynianov Knowing the S3 approach is quite useful because we also have only local files :+1: