Use Custom Fonts in Retool Applications | Tutorial

TL;DR

To use custom fonts in Retool, open App Settings → Appearance → Theme Editor → Typography and paste a Google Fonts CSS URL to change the app-wide font. For full control, add @font-face declarations in Settings → Preloaded CSS and override specific components with ._retool-* selectors using !important. Custom fonts set in the Theme Editor apply globally; CSS overrides scope to specific components.

Quick facts about this guide
Fact	Value
Tool	Retool
Difficulty	Intermediate
Time required	15-20 min
Compatibility	Retool Cloud and Self-hosted
Last updated	March 2026

Custom Typography in Retool: Theme-Level and Component-Level

Retool uses Inter as its default font family across all components. You can override this at two levels: the Theme Editor for app-wide typography changes, and Custom CSS (per-app or Preloaded) for granular component-level overrides.

The Theme Editor's Typography section lets you set a primary font family by pasting a Google Fonts or CSS import URL. This is the recommended approach for consistent brand typography — change it once and all headings, body text, and input labels update automatically.

For more control — mixing fonts (headings in one font, body in another), loading self-hosted fonts, or applying fonts only to specific components — you'll use @font-face declarations in Preloaded CSS and targeted ._retool-* CSS selectors with !important.

This tutorial covers both approaches, plus a quick reference for the most popular fonts used in internal tools.

Prerequisites

A Retool app where you want to apply custom typography
Editor or Admin access to the Retool app
A Google Fonts URL or font files (.woff2 format recommended) for custom fonts
Understanding that CSS font overrides require !important in Retool

Step-by-step guide

Set the app-wide font via the Theme Editor

In the Retool editor, click the gear icon to open App Settings → Appearance → Theme → Theme Editor. Look for the Typography section. You'll see a Font family field and a Google Fonts URL field. In the Google Fonts URL field, paste the @import URL from Google Fonts (e.g., for Inter: `https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap`). Then set the Font family field to Inter (or your font name). Click Save to apply the font across all text components in the app.

Expected result: All text in the app (headings, labels, input values, table content) renders in the new font family.

Add @font-face for custom or self-hosted fonts

For fonts not on Google Fonts, or for self-hosted Retool deployments without internet access, use @font-face declarations in Preloaded CSS. Go to Settings (top-right user menu) → Preloaded CSS/JS and add font declarations at the top of the Preloaded CSS area. Self-hosted fonts require the font files to be accessible via HTTPS URL (upload to S3, Retool Storage, or your CDN).

typescript

1/* Add to Settings → Preloaded CSS */
2
3/* Google Fonts import (use for internet-connected Retool instances) */
4@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
5@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');
6
7/* Self-hosted font via @font-face */
8@font-face {
9  font-family: 'BrandFont';
10  src: url('https://your-cdn.com/fonts/BrandFont-Regular.woff2') format('woff2'),
11       url('https://your-cdn.com/fonts/BrandFont-Regular.woff') format('woff');
12  font-weight: 400;
13  font-style: normal;
14  font-display: swap;
15}
16
17@font-face {
18  font-family: 'BrandFont';
19  src: url('https://your-cdn.com/fonts/BrandFont-Bold.woff2') format('woff2');
20  font-weight: 700;
21  font-style: normal;
22  font-display: swap;
23}

Expected result: The font is loaded and available as a font-family value in any CSS rule across all Retool apps.

Apply the font org-wide in Preloaded CSS

After defining fonts with @font-face or @import in Preloaded CSS, apply them to Retool components. Add rules after the @import/@font-face declarations. Use !important on all font-family properties — Retool's component library sets font-family on most elements and your rules need to override them.

typescript

1/* After @import/@font-face in Preloaded CSS: set org-wide font */
2
3/* Apply to all Retool component text */
4._retool-app-body,
5._retool-app-body * {
6  font-family: 'Inter', sans-serif !important;
7}
8
9/* Heading-specific font (different from body) */
10._retool-text h1,
11._retool-text h2,
12._retool-text h3 {
13  font-family: 'BrandFont', 'Inter', sans-serif !important;
14  font-weight: 700 !important;
15}
16
17/* Monospace font for code or ID fields */
18._retool-text code,
19._retool-text pre {
20  font-family: 'Fira Code', 'Courier New', monospace !important;
21}

Expected result: All text in all apps uses Inter as the base font, headings use BrandFont, and code blocks use Fira Code.

Override fonts on specific components with CSS Class Name

To apply a different font to a single component without affecting others of the same type, use the Inspector's CSS Class Name field (Advanced section). Enter a custom class name (e.g., heading-font or mono-font). Then write scoped CSS in App Settings → Custom CSS targeting that class.

typescript

1/* Per-component font override using CSS Class Name: 'heading-font' */
2
3/* Applied in App Settings → Custom CSS */
4.heading-font ._retool-text,
5.heading-font ._retool-text * {
6  font-family: 'BrandFont', 'Georgia', serif !important;
7  font-weight: 600 !important;
8  letter-spacing: -0.02em !important;
9}
10
11/* Monospace style for a specific text input */
12.mono-input ._retool-textInput input {
13  font-family: 'Fira Code', monospace !important;
14  font-size: 13px !important;
15  letter-spacing: 0.02em !important;
16}

Expected result: Only the components with those CSS Class Names display the overridden fonts.

Set fonts for Table component cells

Table cells have their own CSS structure. To change the font inside table rows and headers, target the table-specific selectors. Note that column headers and cell content are different elements:

typescript

1/* Table header font */
2._retool-table th,
3._retool-table thead td {
4  font-family: 'Inter', sans-serif !important;
5  font-weight: 600 !important;
6  font-size: 12px !important;
7  text-transform: uppercase !important;
8  letter-spacing: 0.05em !important;
9}
10
11/* Table cell font */
12._retool-table td {
13  font-family: 'Inter', sans-serif !important;
14  font-weight: 400 !important;
15  font-size: 14px !important;
16}
17
18/* Numeric columns — use tabular numbers for alignment */
19.numeric-column ._retool-table td {
20  font-variant-numeric: tabular-nums !important;
21  font-feature-settings: 'tnum' !important;
22}

Expected result: Table headers appear uppercase with tracking; cells use readable 14px Inter. Numeric columns have aligned digits.

Test font loading and fallbacks

After applying fonts, open the app in Preview mode and check: (1) the font renders correctly across all components, (2) the fallback fonts (second/third in the font-family stack) are sensible if the primary font fails to load, and (3) performance — check browser DevTools Network tab to ensure fonts load quickly (use font-display: swap for @font-face declarations to avoid invisible text during load). For self-hosted Retool without internet access, confirm font file URLs are accessible from within the network. A font @import to fonts.google.com will fail silently on air-gapped deployments.

Expected result: Fonts load with no FOUT (flash of unstyled text) thanks to font-display: swap, and fallback fonts are appropriate sans-serifs.

Complete working example

Settings → Preloaded CSS (typography system)

1/* ================================================
2   Retool Typography System — Preloaded CSS
3   Apply org-wide. App-level CSS can override per-app.
4   ================================================ */
5
6/* 1. Import fonts */
7@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
8@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');
9
10/* Optional: self-hosted brand font */
11/*
12@font-face {
13  font-family: 'BrandFont';
14  src: url('https://cdn.example.com/fonts/BrandFont.woff2') format('woff2');
15  font-weight: 400 700;
16  font-display: swap;
17}
18*/
19
20/* 2. Define typography tokens */
21:root {
22  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
23  --font-mono: 'Fira Code', 'Courier New', monospace;
24  --font-heading: 'Inter', sans-serif;
25}
26
27/* 3. Apply org-wide */
28._retool-app-body,
29._retool-app-body * {
30  font-family: var(--font-sans) !important;
31}
32
33/* 4. Headings */
34._retool-text h1 {
35  font-family: var(--font-heading) !important;
36  font-size: 28px !important;
37  font-weight: 700 !important;
38  letter-spacing: -0.03em !important;
39}
40
41._retool-text h2 {
42  font-family: var(--font-heading) !important;
43  font-size: 22px !important;
44  font-weight: 600 !important;
45  letter-spacing: -0.02em !important;
46}
47
48/* 5. Table typography */
49._retool-table th {
50  font-weight: 600 !important;
51  font-size: 12px !important;
52  text-transform: uppercase !important;
53  letter-spacing: 0.05em !important;
54}
55
56._retool-table td {
57  font-size: 14px !important;
58}
59
60/* 6. Monospace elements */
61._retool-text code,
62._retool-text pre,
63.mono-text * {
64  font-family: var(--font-mono) !important;
65  font-size: 13px !important;
66}

Common mistakes

Why it's a problem: Adding @font-face or @import in per-app Custom CSS instead of Preloaded CSS, causing fonts to load on every app separately

How to avoid: Put all @font-face and @import font declarations in Settings → Preloaded CSS so they load once org-wide. Per-app CSS should only contain the selector-level overrides.

Why it's a problem: Forgetting !important on font-family declarations and wondering why the font doesn't change

How to avoid: Retool sets font-family on component elements with high specificity. Add !important to every font-family property in your CSS rules targeting ._retool-* selectors.

Why it's a problem: Using a Google Fonts @import in self-hosted Retool on a network without external internet access

How to avoid: Download the font files (.woff2 format) and host them on an internal server or CDN. Reference the internal URL in @font-face declarations instead of the Google Fonts CDN.

Best practices

Apply the primary font in the Theme Editor Typography section first — it handles most component text automatically without requiring CSS
Always provide fallback fonts in the font-family stack: 'Inter', -apple-system, sans-serif — not just the custom font name
Use font-display: swap in @font-face declarations to prevent invisible text while fonts load
Add @font-face in Preloaded CSS, not per-app CSS, so fonts load once for the whole organization
For self-hosted Retool in restricted networks, host font files internally — Google Fonts CDN won't be accessible
Use font-variant-numeric: tabular-nums for any numeric table columns to ensure digit alignment
All font-family overrides need !important to win against Retool's built-in component styles

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

ChatGPT Prompt

I want to use the Inter font in my Retool internal tool app, replacing the default font across all components including tables, forms, and text labels. Write the CSS I need for Retool's Preloaded CSS section, including the Google Fonts @import for Inter, and CSS rules using ._retool-app-body and ._retool-table selectors with !important to apply the font everywhere. Also show how to set different weights for headings vs body text.

Retool Prompt

Set Inter as the default font across this Retool app: (1) add the Google Fonts Inter @import to Settings → Preloaded CSS, (2) add CSS rule ._retool-app-body * { font-family: 'Inter', sans-serif !important; }, (3) set h1/h2 in ._retool-text to font-weight 700, and (4) add tabular-nums to table TD elements for numeric alignment.

Frequently asked questions

Can I use different fonts for different sections of a Retool app?

Yes. Assign different CSS Class Names to components via the Inspector's Advanced → CSS Class Name field, then write scoped CSS rules in App Settings → Custom CSS. For example, assign heading-font to your title Text components and apply font-family overrides only to .heading-font descendants. Body text uses the global font from Preloaded CSS.

Does setting a font in the Retool Theme Editor also change fonts in the Retool editor UI?

No. The Theme Editor's font setting only affects the published/preview app as seen by end users. The Retool editor UI always uses Retool's own interface font. Your custom font applies when users open the app URL, not when editors are building in the editor canvas.

How do I use a variable font (font with multiple axes) in Retool?

Variable fonts work in Retool via @font-face with the font-weight range notation: font-weight: 100 900. Load the .woff2 variable font file via @font-face in Preloaded CSS, then use any weight value in your CSS rules — the single font file handles all weights. Example: font-weight: 650 for a between-semibold-and-bold weight.

Talk to an Expert

Our team has built 600+ apps. Get personalized help with your project.

Book a free consultation

How to Use Custom Fonts in Retool Applications

What you'll learn

Custom Typography in Retool: Theme-Level and Component-Level

Prerequisites

Step-by-step guide

Set the app-wide font via the Theme Editor

Add @font-face for custom or self-hosted fonts

Apply the font org-wide in Preloaded CSS

Override fonts on specific components with CSS Class Name

Set fonts for Table component cells

Test font loading and fallbacks

Complete working example

Common mistakes

Best practices

Still stuck?

Frequently asked questions

Talk to an Expert

Your next step

Learning is great. Shipping is faster with help.

We put the rapid in RapidDev

How to Use Custom Fonts in Retool Applications

What you'll learn

Custom Typography in Retool: Theme-Level and Component-Level

Prerequisites

Step-by-step guide

Set the app-wide font via the Theme Editor

Add @font-face for custom or self-hosted fonts

Apply the font org-wide in Preloaded CSS

Override fonts on specific components with CSS Class Name

Set fonts for Table component cells

Test font loading and fallbacks

Complete working example

Common mistakes

Best practices

Still stuck?

Related tutorials

How to Apply Custom CSS Styles in Retool

How to Enable Dark Mode in Retool

How to Customize UI Components in Retool

How to Use Custom Widgets in Retool

Frequently asked questions

Talk to an Expert

Your next step

Learning is great. Shipping is faster with help.

We put the rapid in RapidDev