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. 

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 
3. Open More type options and click the “plus” icon next to Font variations
4. Add your desired font variation(s) (e.g., weight, width, etc.)

You can add as many available font variations as you want, as long as the additional font variations are available for the chosen variable font.

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, a warning message will appear next to each font variation that the new font doesn’t support. You can either select another font variation that’s supported by the new font or you can delete the font variation. If you change to a font that doesn’t support font variations, you’ll need to change back to a variable font to delete or modify existing font variations.

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 hide or modify the appearance of font variations across breakpoints. To disable or hide a font variation, hover over the variation and click the “eye” icon. 

To delete a font variation, hover over the variation and click 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. Open More type options and click the “plus” icon next to Font variations‍
7. Add your desired font variation(s) (e.g., weight, width, etc.) 

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 Style section of the Actions menu
6. Click the “plus” icon under Font variations and add your desired font variation(s) (e.g., weight, width, etc.) 

Important: Interactions let you animate the 4 most common font variations: weight, width, optical size, and slant. Custom font variations are not available in interactions.

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.

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 integration, but font variations aren’t available. How can I add font variations? 

Font variations aren’t available for use through the Google Fonts integration at this time. You can download fonts from Google Fonts and upload them as custom fonts in Site settings > Fonts tab to use font variations with Google Fonts. 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.