Variable fonts allow you to define certain values for your typefaces, such as weight or width. Compared to traditional fonts with a standard light, regular and bold options, variable fonts are incredibly flexible, meaning you can fine-tune your site typography to your heart's content.

And instead of uploading a file for every weight (like you would with traditional webfonts), you only have one file for variable webfonts that contains all the information. This will save you both filesize and requests.

Here we'll show you how to use variable fonts in Semplice.

Getting started

First, you'll need to make sure the font you want to use is actually a variable font file. Not all fonts will offer variable as an option, as it's still a relatively new web feature. A great resource to find variable fonts is the Variable Fonts website. 

Uploading the variable font

To start using variable fonts in Semplice, go to the Customize > Webfonts area. Upload your variable fonts the same way you upload regular webfonts. If you're not sure how to do this, read this guide to uploading webfonts.

NOTE FOR SELF-HOSTED FONTS: If you uploaded your fonts, you can move to the next step. If you're self-hosting your font, you'll need to click into the font's edit settings and choose "Variable" as the font type. You'll know Semplice recognizes it's a variable font if it's labeled with a green "Variable" label. 

Adding your variable styles

With your variable font installed, you can now start creating your variable style variations.

To do this, click the "Add Variable Style" button beneath your variable font listing. You will now see a preview editor where you can tweak your variable font values, such as the weight or width.

On the left side will be your font style's Axis settings. Axis values are the features of your font that can be variably adjusted. Typical Axis features will be font width, weight, or italics. You can use the sliders to tweak these values.

Once you set your styles here, they will be available everywhere else in Semplice when selecting your web fonts.

To make it easier to adapt your font style to use later, you can also change the size, line height, and spacing in the style preview. This won't be saved in your styles, though – you can adjust this in your Typography settings or straight on the page you're working on.

You can even edit the preview text!

Additional styles

Go ahead and add as many variations of your font as you like. There's no limit to the font combinations and stylings you can create. We recommend labeling them for what you plan to use that particular style for. For example, you can create a custom style specifically for all the buttons on your site.

Applying variable fonts

Now that you've created your variable font styles, you can now choose them from your usual font list in the content editor (or anywhere else in Semplice).

You can even combine multiple variable styles within a single Paragraph module. Pretty neat, right?

That's it! Have fun creating every typographic style you've ever dreamed of.

Troubleshooting

My variable font is not working (axis values are not showing, or not adjusting as expected)

First, make sure the font you uploaded is indeed a variable font.

Semplice should automatically detect the Axis values associated with the font. However, in some cases, the font vendor may not have set up the font file correctly for variable use. In this case, you will need to contact the vendor to make sure you are using the correct Axis values, as well as the most up-to-date version of the font.