Introducing variable fonts in Webflow – Web design tutorial

Variable fonts allow you to add multiple variations of a font with a single file, making it possible to create more dynamic and flexible designs on the web. With variable fonts, you can add new fonts to your designs in Webflow and control various aspects of the font, such as size, weight, and slant, using axes. Additionally, you can add transitions and interactions on hover and mouse move, allowing you to create even more engaging and dynamic designs.

Overall, Variable fonts is a powerful way for web designers looking to create more flexible and dynamic designs.

00:00 – Intro
00:43 – Add
00:59 – Axes
01:25 – Transitions
02:05 – Interactions

----------

[MaxWeir]

Would be nice to separate all custom added fonts into their own category in the fonts dropdown, and placed at the top of the list. As the default list is very long, your custom font could be way down the list. So something as simple as:

Custom or My Fonts:
font-name

Default:
font-name
font-name
etc.

[Wildenfree]

This is going to really make my current client happy 😄 thanks you all!

[angelicojohnrago]

Can't see 'Font variations' option in Transitions

[cjcampbell]

Does this just simply not work with Adobe Fonts? This is so maddening trying to get anything from Adobe Fonts working. Only one font comes through to Webflow (whichever one you selected first) and there are NO variable controls from Adobe Fonts in Webflow.

[siteliem]

Cool. Where can I get trasparent mouse?

[mrose]

Oh Grimur, you make laugh! Very cool feature.

[biljanaj]

I upload custom fonts for my designs, but when I publish the website the fonts change into Ariel, which is very bad design-wise. What's the deal with this? I don't think that this was the case some months ago.

[santaiswhite]

is there away to control variable's font axes to change according to window side? (stretch when window is wide, shrink when it's smaller)?

[andremortari]

It is not appearing to me. Is it still working for anybody?

[mokshjain]

I am a webflow fan for life! In love with you sir. Amazing content, short, precise, and above all accessible.

[j_pbp]

For anyone from the future who can't find the font variation section, it's because they don't support Google's and Adobe's font yet, so if you want to use it, you have to use custom uploaded font

[francescob.]

that is cool, now can you increase the upload size for fonts please? variable fonts are larger and google material symbols font file is like 6-7mb...

[qrtois]

I can't see that option with Font variations on my designer

[pelangos]

This is a fantastic improvement! love you web bros keep innovating.

[emcquesten]

Can any font be converted into a variable font?

[georgy.design]

Making dope sites in Webflow became much-much easier 💪🏻

[thekimgraph]

This is so cool! Is there a way to do a stroke effect with variable fonts? (no fill, just stroke)

[paulh]

Been yearning for variable font support for ages! Looks even more amazing than I imagined

[MillionKProduction-mmef]

It doesn't work for me! The front variation is now showing on my Webflow dash. How do I fix this?