Variable fonts update

Back in December we launched the variable fonts beta with the goal of unlocking additional control and creative possibilities for everyone. Since then, we’ve heard overwhelmingly positive feedback from the Webflow community about how cherished this feature is and the expressive opportunities it provides within a site’s design. Today, we’re introducing a number of impactful updates focused on expanding functionality and user experience. 

Read on below to learn what’s new – 

Full control of variations in Interactions

Designers can now animate the custom axes (optical size, slant, weight, width, etc) of variable fonts for more creative possibilities. Previously, designers could only modify registered axes, but now all axes supported in the font are configurable in interaction events. 

Quickly ID which fonts are variable or static

Designers can now quickly identify between variable fonts and static fonts – thanks largely to a new indicator added to make it easier to see which fonts support variations. As an added bonus, you can also inspect those supported variations in the font picker.

Easier access to variation controls

To improve discoverability, we moved the font variations controls out of “More type options” selector. Now designers have easier access from the typography panel in the style manager.

Quicker configuration of variations

In an effort to add a more seamless experience, now designers can customize all supported variations from our new font variations panel in one single step – you’ll no longer need to add each variation manually. 

Easily access your custom fonts

Custom and Google Fonts added to projects by designers are now at the top of the font selector for easier access. Now font families are grouped into “Site fonts” or “Default fonts” and simplify how designers determine the fonts they added versus the default fonts provided at the start of a project.

–  

Have you tried variable fonts yet? As a reminder, if you want to learn about how variable fonts works on Webflow, including how to upload your own custom fonts – be sure to check out our updated Webflow University article for guidance.