Use the Variable Font feature of Webflow

How to use variable fonts for your Webflow project? In the Designer, the Variable Font feature is available in BETA version!

Key points to remember

The Webflow Conf' 2022, promised us and here it is finally; the variable font feature is now available in Beta version in the Designer.

Static Fonts vs. Variable Fonts

What is a static font?

Static fonts come in several variants. In the same font, we can have different types of styles:

Several types of fat with a well-defined value (e.g. Thin (100), Regular (400), Semibold (600), Bold (700) to name a few)
An italic / Condensed / etc. style or not
etc.

Note that these styles can be combined (e.g. Roboto Italic Bold vs Roboto Italic).

The problem with static fonts is the number of files needed for all the variations that exist (if I want Roboto Thin, Roboto Regular, Roboto Semibold and Roboto Bold, I need 4 files).

This large number of files can weigh down your site, the loading time of your pages (web performance) and therefore impact your natural referencing (SEO).

Moreover, these fonts do not allow to go and find precise fat values. We are limited to the values of the files we import.

If we take our example from above with the Roboto font, we will have the fat values 100, 400, 600 and 700, but not 550 or 275 for example.

What is a variable font?

Variable fonts allow you to group together all the style variants of a font family in a single file (one and the same font).

Thanks to this file we can change the fat value very precisely (from 0 to 1000). It is also possible to modify the variations of the different styles that exist in the font file.

Another advantage of a variable font is transitions. With this type of font, we can make smooth animations between different font styles. For example, we can have a mouse-over effect (hover) on a font and change the weight without the transition being abrupt.

Customizing these fonts can also haveweb accessibility benefits by slightly modifying the font for readability.

How to use Variable Fonts on Webflow

Step 1: Import a variable font file

The first step of this tutorial will be to upload a custom font file in your Webflow project. However, it will be necessary to import a variable font file. To do this, you can download variable fonts from several sites like Google Font or Dafont.

Most variable fonts contain the word "wght" in the file name.

Check out our tutorial on how to add custom fonts in Webflow

Addition of the variable font Briemhand in Webflow

Step 2: Add the font to one of your elements

You can now select one of the elements of your page and in its styles, come and choose the variable font you have uploaded.

change the font of a Webflow button to the variable font Briem Hand

Step 3: Choose a font variation

All you have to do is :

Open the "More type options" drop-down box in the "Typography" section of the styles panel
Click on the "+" icon next to "Font Variations
Customize your variation

And that's it, you can have a very precise style for elements of your page with this new Beta feature.

Adding a style variation to the button with the variable font

Modification of the font weight of the button in the webflow style variations

You can also change the font variation"on hover" to create nice effects / animations on your website (you will have to apply an "all" transition to make the effect smooth).

We let you have fun with this new Webflow style feature, but to go further, you can discover our article to find the right typography for your website.