Variable fonts support now in beta

Note: This release has functionality still in progress. We’re releasing this beta to the community to learn and shape the future of the final feature.

If you’re a designer who also happens to be a big typography nerd, this latest release will feel like an early holiday gift to get you started right for the new year. Following our announcement at Webflow Conf, we’re excited to release variable font control into public beta for all users.

Before today, designers would upload individual files for each font style they wanted to use (e.g. thin, narrow, bold, italic, etc) for more precise control of a project’s typography. However, in our continued effort to further extend the power of visual development on Webflow – there was an opportunity to enable variable font control, and unlock additional control and expressive possibilities for everyone.

Enter variable fonts on Webflow. 

As a reminder, variable fonts was introduced in 2016 and enabled many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This allows designers to have greater control and precision over their site typography.

With variable font control on Webflow, designers can can now explore a range of styles within a single typeface with granular control and creative possibilities

Variable fonts will deliver on a few key benefits: 

• You can now style variable fonts using custom axes, offering robust flexibility in your designs.
• You can now define the weight of your fonts to optimize for site visitor readability based on their display screen (or your general style preferences). Example: narrower width fonts for data-dense displays or a more considerable weight/width font for larger displays. 
• You can now upload a single variable font file instead of multiple font files, with the added bonus of seeing site performance improvements since you do not need to upload as many files. 

In short, variable fonts will unlock more control and creative expression on Webflow and introduce new ways to customize your site design. If you want to dig more into how variable fonts work, see our latest Webflow University article for guidance. Otherwise, play around with variable fonts directly in the Designer today!