How to use custom fonts in Retool applications?

 

Incorporating Custom Fonts in Retool Applications

 

Creating a cohesive aesthetic in your Retool application often involves using custom fonts. This guide provides a detailed explanation of how to incorporate custom fonts in Retool, outlining the necessary steps to ensure your application reflects your brand effectively.

 

Prerequisites

 

• Access to a Retool account and a specific application where you want to apply custom fonts.
• Basic familiarity with CSS and web fonts.
• Availability of the custom font files or links to web font services such as Google Fonts or Adobe Fonts.

 

Uploading and Hosting Fonts

 

• First, decide how you'll host the font files. You can either use a third-party service like Google Fonts, or self-host them if you have the relevant font files.
• For self-hosting, ensure your font files (e.g., .ttf, .woff, .woff2) are hosted on a server or storage service that can provide direct access URLs. Services like AWS S3 or other cloud storage solutions can be suitable.
• Make a note of the fonts' URLs, as these will be needed to link to the fonts in your custom styles.

 

Applying Custom Fonts via CSS

 

• Open your Retool application and navigate to the Query Library in the lower-left pane.
• Access the JS/CSS Editor by selecting the '<' arrow symbol to expand the editor view.
• In the CSS section of the editor, input the necessary CSS rules to define your custom fonts. This is done using "@font-face" rules when self-hosting:

  <pre>
  @font-face {
    font-family: 'CustomFontName';
    src: url('https://yourstorageurl.com/path/to/font.woff2') format('woff2'),
         url('https://yourstorageurl.com/path/to/font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  </pre>
  

• Ensure that the URLs point to the correct path where the font files are hosted. If using web font services like Google Fonts, instead embed the link provided for the font family at the top of your CSS code.

 

Using Custom Fonts in Retool Components

 

• With the fonts declared, you can apply them to components within Retool using CSS selectors. For example, if you want all text in a text component to use the custom font:

  <pre>
  ._retool-text1 {
    font-family: 'CustomFontName', sans-serif;
  }
  </pre>
  

• To find the correct CSS class names for your Retool components, utilize the browser's developer tools to inspect the elements and identify their classes.
• Apply your custom font to other elements similarly by targeting specific class names or IDs.

 

Verifying Font Integration

 

• Ensure to save your changes in the JS/CSS editor. Use the preview mode to view the application with the newly applied custom fonts.
• Verify that fonts are loading correctly by checking for any errors in the browser console that might indicate font file access issues.
• Test the display across different pages and components in your Retool app to ensure consistency.

 

Handling Cross-Browser Compatibility

 

• Check that the fonts render correctly in all major browsers. Use format hints in the "@font-face" rule to provide different font formats (e.g., woff2, woff) to deal with compatibility issues.
• Verify that the fonts are working on mobile views, as browser implementations can vary on mobile devices.

 

Incorporating custom fonts into your Retool applications enables you to enhance the visual coherence of your application, making it more aligned with your brand identity. Follow these steps precisely, and don't hesitate to adjust CSS rules or asset hosting configurations as needed.