Use variable fonts
If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →
Before you Start
Who can use this feature
Users on any team or plan
Users with edit access to a Figma Design file can use variable fonts
Variable fonts are different from variables. Looking to apply variables to font properties? Check out our guide to variables →
A variable font provides a range of dynamic font variations for a typeface in a single file. While static fonts can only contain one font per file, a variable font can contain many.
For example, if a typeface contains five font styles — italic, thin, regular, bold, and black — using the typeface’s static font files would require five font files. In contrast, using the typeface’s variable font version would combine all five styles into one file.
Variable fonts also contain axes (singular noun axis), which provide a range of property customizations. Standard axes include weight, width, optical size, and slant, but font authors can also provide alternative axes for more style options.
For example, instead of providing a few predefined properties (such as font weights of 300, 500, and 700), font authors can set a range so that users can apply granular values (so, font weights of 143 or 629 in a range from 100-800).
In this article, we’ll talk about how to replace static fonts with the variable font version, how to change axes, access previous axis settings, and developer handoff.
Check out our variable fonts page to learn more about axes and how they’re used, and for additional resources!
Note: If you are using the Figma desktop app, you can use any fonts already on your computer. If you're using Figma in the browser, you can install the Figma Font Helper to access your local fonts.
Replace static fonts
If the font you’re using contains a variable font version, you can replace the static font that you, your team, or your organization has been using with the font’s variable font file.
Keep in mind that when editing in Figma Design, Figma pulls fonts from three different sources: shared fonts, local fonts, and web fonts (Google fonts) provided by Figma.
If the same font is available from more than one source, Figma will serve fonts in this order of priority:
- Shared font uploaded to the organization →
- Local fonts installed on your device →
- Default web fonts provided by Figma →
Shared fonts
Before you Start
Who can use this feature
Users on organization and enterprise plans
Organization admins can upload and manage the organization's shared fonts
If the new variable font contains the font families of your previous static font files, then Figma will ask if you want to replace the static font with the variable font.
Once you click replace, Figma deletes the old static font from the shared fonts list and uses the variable version.
Note: A font’s variable version might not have the same font styles available as its static versions.
For example, say you want to replace your organization’s static fonts (which include light, regular, bold, and black styles) with the variable font version. However, the variable version includes all styles except bold. In this case, Figma keeps the static font file for bold so it can be used. The rest are replaced by the variable font version.
Local fonts
Before you Start
Who can use this feature
Users on any team or plan
Users with Edit access to a File can create and edit Components.
To replace your static fonts with a variable version, be sure to install the variable version to your device.
If the variable font version contains all the families of your old static fonts, then there are no further steps to take. Figma will automatically prioritize using the variable font over the static ones.
However, if the variable font version is missing any families, you’ll see a missing font dialogue and will need to choose a replacement style →
Default fonts provided by Figma
If you’ve been using any default fonts, like Google fonts, transitioning to the variable font version depends on the font’s latest variable version.
If the variable font version contains all old static styles, then the replacement will be seamless.
However, if the variable font version is missing any families, you’ll see a missing font dialogue and will need to choose a replacement style →
Use variable fonts
Customize text
Customize text using variable fonts by changing various axes. The most common options are weight, width, optical size, italic, and slant. The axes of a variable font depend on the author of the font.
You customize your variable font text from the type settings panel. There are two ways to access these settings:
Right sidebar
- Select text or text layer(s) using a variable font.
- Click from the right sidebar to open the type settings panel.
- Click the Variable tab.
Font style picker
- Select text or text layer(s) using a variable font.
- Click the to open the font style drop-down menu.
- Select Variable font axes...
Once you’re in the variable tab in the type settings panel, use the sliders and input boxes to change the values of each axis.
Tip! Hover over an axis in the type settings panel to preview what the property looks like.
Access frequently used axis settings
Quickly access previous variable font settings you’ve applied to text. These settings are explicit to individual fonts, and Figma lists the most frequently used axis settings.
- Select one or more text layers using a variable font.
- Click the to open the font style drop-down menu.
- Options are listed just below the font families. Click a setting to apply it to the text.
Developer handoff
If you have can view
access to a file, use the Properties tab in the right sidebar to view a text layer's variable font properties.
If you're in Dev Mode, use the Inspect tab in the right sidebar to view a text layer's variable font properties and grab its code snippets.