Variable fonts

Use variable fonts to improve site performance and customize designs with precision.

layout-design
This video features an old UI. Updated version coming soon!

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
A spectrum of font weights for a single font from 100 thin to 900 bold, with the 400 regular weight sitting toward the beginning of the spectrum. 

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. 
The Font dropdown is open to display a list of available font options. The mouse cursor hovers over a variable font called “Roboto Flex.”  
“More type options” is highlighted in the Typography section below basic typography styling options like alignment and style. 
Font variations highlighted under More type options. 
The editing menu for a custom “Weight” axis font variation.
Italic, width, and weight font variations appear under Font variations in the Typography section of the Style panel. 
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.
A warning sign shows next to a font variation with the message: “This font variation setting is not supported by the selected font. To customize this axis, select a font that supports this variation setting.”
A tooltip above the font variations section of the Style panel reads: “To use font variations, select a variable font from the font family dropdown. You can add a variable font to your project from the fonts tab in your Site settings.”
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. 
The dropdown arrow highlighted in the Selector field is used to access the States dropdown. 
The Selector field and States dropdown show that the Hover state is currently being edited. 
“More type options” is highlighted in the Typography section below basic typography styling options like alignment and style. 
Italic, width, and weight font variations appear under Font variations in the Typography section of the Style panel. 

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 
The dropdown arrow highlighted in the Selector field is used to access the States dropdown. 
The Selector field and States dropdown indicate that the default “None” state is currently being edited. 
Transitions are highlighted under the Effects section of the Style panel. 
The editing menu for a custom “Font Color” transition. 
Font-variation-settings and font color transitions appear under Transitions in the Effects section of the Style panel. 

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.
The Interactions panel contains no Interactions and provides options to add element triggers or page triggers. 
The Action dropdown under a Page load trigger’s “When page starts loading” section shows the option to “Start an animation” under Custom animation. 
The Font variation action is highlighted under “Style” actions in the animations builder. 
The Font variation section highlighted within the animations builder.
The editing menu for a custom Weight axis font variation in the animations builder. 
Weight and slant font variations appear under the Font variation section of the animations builder.  

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. 

Axis tags appear as options for font variation axes when the type designer doesn’t include human-friendly names for the axes. 

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