Variable fonts update
Introducing new usability updates including easier access to variation controls, custom axes in Interactions, and quicker configuration of your variable fonts

<p id="">Back in December we launched the <a href="<https://webflow.com/feature/variable-fonts-support-now-in-beta>" id="">variable fonts beta</a> 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. </p><p id=""><strong id="">Read on below to learn what’s new – </strong></p><figure id="" class="w-richtext-figure-type-image w-richtext-align-fullwidth" style="max-width:1600px" data-rt-type="image" data-rt-align="fullwidth" data-rt-max-width="1600px"><div id=""><img src="<https://cdn.prod.website-files.com/64f9399ca7d13575ff21a675/64f9399ca7d13575ff21d65bv3P-lPeEsDB4LTSF3m9pIzlNqgObdhXrlECkIIFI4qyGuC6solgLLHEqNBi08qiUK5e16-cb42sMEJ96Lww-nZ1SOgNKjjxUbq8IXWMP9FZOAdCAJmSffICPHHPuc3imCKlwBpwnUqz9UTNIceaO4Q.jpeg>" id="" width="auto" height="auto" loading="auto"></div><figcaption id="">Introducing new variable font updates focused on usability improvements. </figcaption></figure><h3 id=""><strong id="">Full control of variations in Interactions</strong></h3><p id="">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. </p><h3 id=""><strong id="">Quickly ID which fonts are variable or static</strong></h3><p id="">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.</p><h3 id=""><strong id="">Easier access to variation controls</strong></h3><p id="">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.</p><h3 id=""><strong id="">Quicker configuration of variations</strong></h3><p id="">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. </p><h3 id=""><strong id="">Easily access your custom fonts</strong></h3><p id="">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.</p><p id="">– </p><p id="">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 <a href="<https://university.webflow.com/lesson/variable-fonts>" id="">Webflow University article</a> for guidance. </p>