Variable Fonts in WordPress: How to Use Them and Why

“What fonts?!” – you ask. This is probably most people’s first reaction when introduced to variable fonts.

Give them a chance, though. I promise this will be worth your time!

In this post, we tell you all about what variable fonts are, and why you should use them over “normal” fonts. Then, we explain how to add variable fonts in WordPress.

But first:

The problem with fonts on the web

Granted, you probably didn’t know fonts had a problem, but hear me out. Here’s a little primer on how fonts and font files work on websites.

First order of business; sorry if you’re someone who’s familiar with the official meaning of terms like typeface, font, font family, and so on. As it’s usually the case among people working with websites, I use many of these terms interchangeably. While not entirely correct, for the purpose of this discussion, it’s not as problematic.

Okay, back to the topic:

Fonts aren’t something that we think about too often when working on our sites – at least, not from a technical point of view. All we want is for the font to just “be there” – ready to use. We don’t concern ourselves much with how this font actually finds itself on the site in the first place.

On the one hand, this is perfectly okay as long as you’re using what’s often called “web safe fonts.” These fonts are already there, so to speak, and don’t need to be fetched by the visitor’s browser before the content on your page can be displayed.

That’s all fine and dandy, but how many awesome designs can you build with just Arial or Verdana, right?

So, this is where custom fonts come into play.

These days, you can fetch pretty much any font and make it compatible with your website. In other words, any font file can be integrated with the web and then shown to your visitors.

There are services that aim to make this as straightforward as possible. The most known of those is called Google Fonts.

However, no matter what such service you use – be it Google’s or someone else’s – the main challenge still stands. That is, you have to integrate the font with your site somehow. That somehow usually means uploading the font file and embedding it in your site’s code.

The problem? This takes time and bandwidth.

The way these fonts work – even the optimized ones – is that each font style has to be saved as a separate font file. For example, Roboto – a very popular font, has 12 different styles available:

• Thin // Thin italic // Light // Light italic // Regular // Regular italic // Medium // Medium italic // Bold // Bold italic // Black // Black italic

If you wanted to use all these styles on your site, you’d have to line up 12 files to be loaded alongside the rest of your site’s code (I’m oversimplifying, but that’s the core of the issue).

Roboto is pretty optimized, but if you opt for some more obscure font, you might be dealing with 500 KB of additional data on each website load. We’re talking font data only.

If you’ve ever paid a hosting bill, you know that this is a lot, considering that you can’t really reduce that number by optimizing the files in any way.

Or, can you? 🤔

This is where variable fonts come into play.

In short, variable fonts do all that “multiple style” magic inside a single font file. ✨

What this means is that instead of having to pick the individual styles that you want to have loaded onto your site, you can get one main variable font file and have all the styles embedded in that.

But, it gets even wilder. It’s not only that you get all the predefined styles, but you can also use anything in between.

Here’s how it works:

Not to get too technical about this, the way styles are “kept” in a variable font is through an axis (or multiple axes). Imagine the current weight of a font being a value on an axis of “font weight.” Such an axis allows you to scroll freely through the values and land on something that matches your needs exactly vs having to do with some predefined values of “semi-bold” or “thin.”

So, just to emphasize, if you have a range of available weight values from 100 to 1000, then you can land on pretty much any specific value from that range. You can use 100, 147, 999, and so on.

This goes above just font weight. Variable fonts can have multiple axes that define various style attributes of the font. For instance, italic is another common axis that’s used. Others can include: slant, optical size, width, and so on.

When using the font, you can pick the exact spot on these axes that you want to use.

The best part? You still only need a single variable font file to get this unlimited number of possible font variations. The amount of space you can save with this one file is not insignificant – one 200 KB file vs five or six of them.

How to add a variable font to WordPress

There are two main ways you can do that, depending on how deep you want to go with source code and stuff:

• the manual way,
• the easy way with Blocksy.

The manual way

Like every font file, you can add a variable font to your site by declaring it in your CSS. For example, something like this:

@font-face {
    font-family: 'Font Name';
    src: url('Font-file.woff2') format('woff2 supports variations'),
       url('Font-file.woff2') format('woff2-variations');
    font-weight: 100 1000;
}

A couple of things that need more context:

• You have to have the font file in your site’s directory path somewhere. You can get some variable fonts from Google Fonts, for example.
• The format descriptions are meant to prevent the visitor’s browser from loading the font if it doesn’t support the format.
• The font-weight declaration sets the range of styles available on the weight axis.
• You can use other axes there as long as the font supports them.

From now on, you can assign this font to different content elements on your site. You can also define the weight of the font in the standard manner, for example: font-weight: 247;

The easy way with Blocksy

Just to bring you up to speed, Blocksy is our flagship product. It’s a highly customizable and optimized WordPress theme that’s built to make using it as easy to grasp as possible. One of its many features is a built-in support for variable fonts in WordPress.

Here’s how to enable variable fonts on your Blocksy site:

First, go to your wp-admin, into Blocksy → Extensions → Pro Extensions. (Blocksy Pro subscription is required.)

Activate the Custom Fonts module:

Go into the settings of your custom fonts:

Click on the Upload Variable Font button:

You’ll be able to pick the files for the regular and italic versions of the font from your desktop (the two most common types of variable fonts).

Give your font a name and click on Save Custom Font.

From now on, this font will be available in the various areas of the WordPress interface. For instance, you can go to the main Customizer panel, into Typography, and pick your new variable font from the list:

When to use variable fonts in WordPress?

Variable fonts can be ideal in a situation when you’re using the same font multiple times throughout your site, and you’re taking advantage of all the available styles of that font.

A variable font file will do a much better job here vs standard font files that you have to fetch for each style.

Another scenario – a completely different one – is that variable fonts can be awesome for animations. Simply speaking, variable fonts can be an elegant way to animate transitions between different font weights fluently through CSS alone. But that’s a potential idea for later – just to get you excited!

What do you think about variable fonts in WordPress? Are you ready to introduce them to your site?