Font variables

Font variables are named font settings you save once and reuse across your app. Instead of setting the same font family on every element and/or style, you reference the variable, keeping your typography consistent everywhere it's used.

Navigate to Global and Variables to find your project's font variables.

When you update a font variable, every element that uses it updates too. This makes it much easier to iterate on your app's typography, especially as your app grows.

What font variables are for

Most apps rely on a small set of text styles that appear over and over: headings, body text, captions, buttons, and links. Without variables, each of those styles ends up scattered across your app, hardcoded on individual elements. Updating one style means finding and updating every element that uses it.

Font variables replace that pattern with a single, named reference. Once a font is saved as a variable, it becomes part of your design system, available to any element or style that needs it.

Creating a font variable

1

Navigate to Font variables

Go to the Global tab and Variables section. You'll find the list of font variables.

2

Add a new font variable

Click + New font variable to create a new variable. The font variable editor will open.

3

Name and describe the font

The name and description you give a font variable have a big impact on how easy it is to work with, especially as your app grows and other people collaborate with you.

Naming variables

The name is how you'll reference the font in the editor, so it should make the variable easy to identify at a glance.

• Name by role, not appearance. Brand heading is more useful than Inter, because the name still makes sense if you change the font later. Naming by appearance breaks down as soon as your typography evolves.

• Group related variables with a prefix. Prefixes like Heading, Body, and Caption help related fonts sort together and make the picker easier to scan. For example: Heading primary, Heading secondary, Body primary.

• Match your team's naming conventions. If you're working with others, agree on a naming pattern early. Consistency is more valuable than any specific naming choice.

Writing descriptions

Descriptions aren't required, but they're useful for anyone (including future you) trying to understand what the variable is meant for.

• Explain the intent, not the font. A description like Used for primary page headings is more helpful than Inter. The intent is what stays consistent even if the font changes.

• Note where it should be used. If a variable has a specific purpose, spell it out. For example: Section titles inside cards and modals or Metadata like timestamps and author names.

• Note where it shouldn't be used. If two variables are similar, describing when to pick one over the other prevents mix-ups. For example: Use for standalone captions; body text should use Body default.

• Keep it short. A sentence or two is usually enough. Descriptions are meant to give quick clarity, not full documentation.

4

Pick the font

In the dropdown at the bottom, pick the font you want to use.

5

Save it

Click Create to create the new font variable. You'll see it in the list immediately.

Using font variables

Font variables are available anywhere you work with typography in the editor. In the property editor, wherever you'd normally set a font family, you can pick a variable instead. The picker shows your saved variables alongside the standard font options, making it easy to apply the right one.

Wherever you work with typography, your font variables appear at the top of the list of available fonts.

Font variables can be used in:

• Element properties, such as text elements, buttons, inputs, and any other element that displays text.

• Styles, so an entire component's typography is built from your variables. Using variables inside styles is what ties the whole system together.

• Conditional properties, letting you change an element's font based on a rule while still referencing your saved set.

Since font variables only set the font family, other typography settings like size, weight, and style are configured separately on the element or style. This gives you the flexibility to use the same font family in different sizes and weights across your app while still keeping the underlying family consistent.

Updating a font variable

1

Navigate to the variables section

Open the Global tab and click the Variables section.

2

Find the font variable

Find the font variable you want to update.

3

Set the new font

On the right side of the font variable row you can see the font picker. Click it and select the font you want to use.

4

Change the name and/or description

To open up the full font variable edit window, click the pencil icon on the left side of the font variable row. Make the needed changes and click Save.

5

The font is updated everywhere

The font is now updated everywhere it's used in your project.

This is what makes font variables so powerful. Instead of tracking down every place a font is used, you can change it in one place and see the change propagate everywhere.

Searching for components using a specific font variable

Find usages is useful when you want to review the impact of a change before making it, clean up unused variables, or trace inconsistencies in your design. It's especially helpful in larger apps, where the same variable can be referenced in many places across pages, reusable elements, and workflows.

1

Find the font variable

Navigate to Global, Variables and scroll to the font variable you want to search for.

2

Open the contextual menu

Click the ... menu on the right side of the font variable row and click Find usages.

3

Click the component you want to select

The App search tool will open and show all components that use the font variable. Click one to focus on it in the editor.

FAQ: Font variables

What's the difference between a font variable and setting a font directly?

A font variable is a saved, named font that can be reused across your app. Setting a font directly hardcodes the choice onto that element, so it can't be updated centrally. Font variables make it easy to keep your typography consistent and to change fonts in one place.

Can I use font variables in styles?

Yes. Styles can reference font variables just like individual elements can. Using variables inside styles is what ties the whole design system together, since your elements pick up the font indirectly through the styles they use.

What happens when I change a font variable?

Every element and style that uses the variable updates automatically to reflect the new font. This is one of the main reasons to use font variables in the first place.

Can I delete a font variable that's still in use?

You can, but any element referencing it will lose the connection and revert to a hardcoded font. Use Find usages to review where the variable is used before deleting it, so you can update or replace it where needed.

How many font variables should I have?

There's no strict rule, but a small, well-chosen set is easier to maintain than a large one. Most apps do well with just a few, covering things like headings, body text, and supporting text.

Note on performance: Each font family is a separate file that the user's browser needs to download for the page to render correctly. Using multiple font families adds to the initial page load. Fonts are cached after the first download, so subsequent visits and page loads are faster.

Can I use font variables in conditional properties?

Yes. Conditional properties support font variables, so you can change an element's font based on a rule while still referencing your saved set.

Do font variables work in both web and native mobile apps?

Yes. Font variables are part of your app's design system and are available on both platforms.

Can I use a custom font in a font variable?

Yes. Upload the font through Custom fonts first, then reference it in your font variable.

Do font variables control font size or weight?

No. Font variables only set the font family. Size, weight, and other typography settings are configured on the element or style directly.