Variable fonts

Traditionally, font weights and styles were separated into different font files, forcing designers to upload individual files for every style — until now. With variable fonts, all variations of a single font are combined into 1 file, improving site performance and allowing designers to customize font styles with greater control and flexibility. 

In this lesson, you’ll learn:

1. What are variable fonts? 
2. How to use variable fonts and font variations
3. How to create animated transitions with font variations
4. How to create interactions with font variations 
5. FAQ and troubleshooting tips

What are variable fonts? 

A variable font is a font that encompasses its entire font family (e.g., Open Sans, Roboto Flex, etc.), not just one style or instance. In the past, designers needed multiple font files to access multiple font weights (e.g., Light 100, Bold 700, etc.), an approach which supports only limited granularity in designs and can decrease site performance. Variable fonts include all weights in a font family’s range, which allows designers to customize font styles with more detail and precision. 

Pro tip: You can find variable fonts through resources like Google Fonts, V-Fonts, and Fontesk. 

Additionally, variable fonts provide controls along multiple axes (i.e., font properties) that designers previously couldn’t access. There are 5 common axes which control known, predictable features of a font — weight, width, optical size, slant, and italics — but variable fonts can also contain custom axes which control other design aspects of the font chosen by the type designer — for example, the font’s softness, the thinness of stroke weights, the height of ascenders, etc. 

How to use variable fonts and font variations

Before you get started: Make sure you’ve already uploaded a custom variable font in Site settings > Fonts tab. You can find variable fonts through resources like Google Fonts, V-Fonts, and Fontesk. Learn more about uploading custom fonts. 

Important: Webflow supports variable fonts in TTF, OTF, WOFF, and WOFF2 formats. EOT and SVG formats are not supported. 

To use a variable font and create font variations: 

1. Select the typography element (e.g., heading, text link, etc.) you’d like to style on the Designer canvas
2. Go to Style panel > Typography > Font dropdown and select your variable font under Custom fonts 
3. Click the text box next to Variations to open the font variation menu
4. Set your desired font variation(s) (e.g., weight, width, etc.) by dragging the sliders or manually entering values next to each variation

You can quickly identify variable fonts by the “dot” that appears next to them in the font picker. You can also check how many variations they support right from the font picker by hovering over the “dot.”

Note: If you set a font weight in Style panel > Typography section and then add a font variation on the weight axis, the font variation will override the previously set font weight. 

Important: If you set a font variation and then change to a different font, any font variations you previously set on the original font will be reset.

Pro tip: You can set different font variations across different media queries (“breakpoints”) or on parent elements to apply the font variation to all child text elements. Just like other typography properties (e.g., font family, font size, color, etc.), font variations are an inheritable property.

You can delete font variations by opening the font variation menu, hovering over the variation you want to delete (e.g., weight, width, etc.), and clicking the “trash” icon. 

How to create animated transitions with font variations

You can also style font variations for different element states (e.g., hover, focused, etc.) and create animated transitions between the default state (“none”) and alternate states. 

Note: Take care to consider accessibility as you build your animated transitions and avoid rapid, unexpected, or excessive movement. Learn more about using thoughtful motion and animation. 

To create font variations for a particular state: 

1. Select the element you’d like to style
2. Open the Style panel > Selector field 
3. Give your element a class or select its HTML tag, if it doesn’t already have a class or tag applied 
4. Click the dropdown arrow to open the States dropdown and select the state you want to design (e.g., hover, pressed, focused, etc.) 
5. Go to Style panel > Typography and select your variable font (if the font has not already been set for the selected element, or if you’d like the entire font family to change in the selected state) 
6. Click the text box next to Variations to open the font variation menu
7. Set your desired font variation(s) (e.g., weight, width, etc.) by dragging the sliders or manually entering values next to each variation

Note: You won’t be able to access the States dropdown if your selected element doesn’t have a class or HTML tag applied. 

Then, you may want to create an animated transition for the change between the default state and the alternate state. To create an animated transition: 

1. Follow the steps above to create a font variation for an alternate state 
2. Open the Style panel > Selector field 
3. Click the dropdown arrow to open the States dropdown and select “none” 
4. Go to Style panel > Effects and click the “plus” icon next to Transitions 
5. Add any transition effects you’d like (e.g., font color, font variations, etc.) 
6. Set the Duration of your transition effect
7. Click the “Open easing editor” icon to customize the Easing, if you’d like 

How to create interactions with font variations

Interactions also support variable fonts, so you can create unique animations with font variations. 

Note: Take care to consider accessibility as you build your animations and avoid rapid, unexpected, or excessive movement. Learn more about using thoughtful motion and animation. 

To create an interaction with font variations: 

1. Open the Interactions panel 
2. Click the “plus” icon to add an Element trigger (e.g., mouse hover, scroll into view, etc.) or Page trigger (e.g., page load, page scrolled, etc.)
3. Open the Action dropdown from the starting action section (i.e., if you chose the mouse hover element trigger, you’d open the Action dropdown from the On hover section)
4. Choose an animation under Custom animation
5. Create your custom animation and choose Font variation under the Actions menu > Style section
6. Scroll down to Font variation and click the text box next to Variations to open the font variation menu
7. Set your desired font variation(s) (e.g., weight, width, etc.) by dragging the sliders or manually entering values next to each variation

FAQ and troubleshooting tips 

Where can I find variable fonts to use in my designs? 

You can find variable fonts through resources like Google Fonts, V-Fonts, and Fontesk.

What font formats are supported for variable fonts? 

Webflow supports variable fonts in TTF, OTF, WOFF, and WOFF2 formats. EOT and SVG formats are not supported. 

What is the maximum file size for custom fonts? 

You can upload a maximum file size of 4MB per font file.

I uploaded a variable font before this feature was released and I’m not able to add a variation. How can I add a font variation? 

Visit Site settings > Fonts tab, delete the variable font, and reupload the variable font file. Then, you should be able to add font variations when you open your site in the Designer! 

I selected a variable font through the Google Fonts or Adobe Fonts integration, but font variations aren’t available. How can I add font variations? 

Font variations aren’t available for use through the Google Fonts or Adobe Fonts integrations at this time. You can download or license fonts from font integrations and upload them as custom fonts in Site settings > Fonts tab to use font variations. Learn more about custom fonts.

I uploaded a variable font before the font was updated with new font variation axes. How can I add font variations on the new axes?

You’ll need to reupload the font to use the new font variation axes. Visit Site settings > Fonts tab, delete the variable font, and reupload the variable font file.

Why are some of the axes names not showing as expected? 

The names of the font variation axes that appear in the Designer depend on the variable font file that was uploaded. If the type designer of the variable font doesn’t include a human-friendly name, Webflow defaults to the axis tag.

How are font variations sorted? Can multiple font variations use the same axis? 

Font variations can have multiple variations on the same axis, since this practice is allowed by the CSS spec. The axis that is furthest below takes precedence in the applied CSS. For example, if you’ve created the following font variations: 

Slant: 0

Weight: 146

Width: 300

Optical size: 18

Weight: 1000 

The “weight” that will ultimately apply to your font is 1000. 

What’s the difference between the “italic” and “slant” axes? 

While the italic and slant axes are closely related, the slant axis controls the font file’s slant parameter for oblique or upright styles, while italics have a structure separate from oblique styles informed by cursive writing. Learn more about the slant axis.