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.
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
Go to the Global tab and Variables section. You'll find the list of font variables.
Click + New font variable to create a new variable. The font variable editor will open.
Name and describe the font variable.
In the dropdown at the bottom, pick the font you want to use.
Click Create to create the new font variable. You'll see it in the list immediately.
Naming your font variable
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.
Group related variables with a prefix. Prefixes like Heading, Body, and Caption help related fonts sort together. For example: Heading primary, Heading secondary, Body primary.
Match your team's naming conventions. Consistency is more valuable than any specific naming choice.
Writing a useful description
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. 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. 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.
Keep it short. A sentence or two is usually enough.
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.
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
Open the Global tab and click the Variables section.
Find the font variable you want to update.
On the right side of the font variable row, click the font picker and select the font you want to use.
To edit the name or description, click the pencil icon on the left side of the row, make your changes, and click Save.
The font is now updated everywhere it's used in your project. Instead of tracking down every place a font is used, you change it in one place and see the update propagate everywhere.
Finding components that use a 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.
Navigate to Global, Variables and scroll to the font variable you want to search for.
Click the ... menu on the right side of the font variable row and click Find usages.
The App search tool opens and shows 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?
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?
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?
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?
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?
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?
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?
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?
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?
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.