How to Use Variable Fonts in WordPress

Fonts are an integral part of any website’s design. They hugely impact the image of a website and can completely alter the design’s style. Font style dictates the atmosphere on a site and shapes the message you want to convey. It would be a pity to stick to using the same font, in the same size, height, weight, and spacing all across your website and miss all the fine nuances variable fonts can bring. You will be amazed how much variety just a bit of customization can offer even when you decide to use just a single font.

Variable fonts allow you to have many different fonts incorporated in a single file, unlike a typical font that needs at least four files. They are an extension of the OpenType font specification that relieves you from having to create a separate font file for every style, weight, or width.

In this article, we’ll show you how to use variable fonts in WordPress in just a few steps. Keep reading to find out:

How Do Variable Fonts Work?

How does a variable font work? It starts with a default style which is usually the ‘Regular’ font style, characterized by an upright design and the most common weight and width. It is most often used for plain text. This default style is connected to other styles in a continuous range and these styles are called the axis. There are five common axes – slant, width, weight, italics, and optical size.

Each individual style can be placed along an axis and it is called the ‘instance’ of the variable font. For example, the variable font Roboto Flex offers three different styles for the weight axes. At the opposite ends to the axes, there are two styles and the regular style is in the middle. There are 900 instances you can choose from.

So, a variable font is a single font that can be customized across five different criteria or axis – weight, slant, italics, optical size, and width. Every alteration is done with CSS and each ax controls one of the facets in the appearance of the font. Each aspect includes a corresponding CSS label:

You can mix and combine all those aspects of the font to alter it and completely change the way your font looks. It is even possible to animate fonts like SVGs.

So, instead of having to incorporate multiple fonts on your website, a variable font allows you to use just one that you can alter to appear completely different for different purposes. One of the greatest advantages of variable fonts is that they can be great for animations. They provide you with a smooth and easy way to animate transitions between different font weights just by using CSS. They are also an ideal solution in cases when you’re using the same font in too many places across your website and have already exhausted all of its available styles.

Installing the Font on Your Website

After you find the right font for your website, the first step is to install it. There are many plugins to help you with that like Custom Fonts, Use Any Font, and similar. If you need some help with installing custom fonts on your site, here is a detailed explanation of the custom font installation process. No matter how you choose to have your selected font installed, the result is the same, and the way you can manage your font is also the same.

As we explained earlier, variable fonts are CSS-based which means you can find them in all the places where you added your custom CSS. That practically means a variable font can be in a custom.css file, a stylesheet.css, and similar places. What you need to do is to enter the code below and include the name of the variable fonts you have chosen to use:

01 @font-face {
02 font-family:'Gingham';
03 src: url('Gingham.woff2') format('woff2'),
04 }

This way, you enable the use of the variable font on your website. Now, you can proceed to style the font. You can apply styling to any class or ID and make your font appear totally different. It is up to you to decide whether you want to apply customization only on H1, H2, H3, the whole page, or the whole post. There are two ways to alter the font – to enter all the changes in one single line of code:

01 h2 {
02 font-family: 'Gingham',Helvetica,sans-serif;
03 font-size: 30px;
04 font-variation-settings: 'wght' 500, 'wdth' 55;
05 }

You can also split the alteration into multiple lines of code if you find it more convenient:

01 h2 {
02 font-family: 'Gingham',Helvetica,sans-serif;
03 font-size: 30px;
04 wdth: 750;
05 wght: 400;
06 }

This way you can basically make all kinds of font alterations anywhere on your website.

Finding Variable Fonts

Google Fonts are the most popular go-to resource for free fonts, but they do not offer a wide choice of variable fonts. If you want to stick to Google fonts you can use the Recursive variable font family from Google Fonts. This is an open-source, OFL font and you can see more about it at recursive design. Some of the other popular free variable fonts are Gingham and League Mono. You can find a wide choice of free variable fonts at 150+ Free Variable Fonts › Fontesk.

As for the premium variable fonts, the choice is of course richer. You can explore Adobe Typekit, V-fonts, Monotype, and many more resources.

How to Choose The Right Font

Choosing the right font for your website requires you to consider many different aspects of your web design as well as to estimate which style exactly will empower your brand and not jeopardize the overall message you aim to convey. How the font style matches your brand essence, which variations to use at which locations on your website, and should you stick to the familiar styles or experiment with something new – these are all the questions that require serious consideration.

Bear in mind that choosing the right font can significantly improve both your website’s design and user experience. Luckily, once you get the hang of it, a variable font is usually easy to use and tweak so that you can try out different styles until you find the variations that work best for you.

In Conclusion

Variable fonts introduce many exciting possibilities without burdening the user with too complicated procedures. They may require some experience with code, but even a total beginner can learn to use them quickly by carefully following the instructions for their use. Since variable fonts are relatively new, we can surely expect many more improvements and possibilities in the near future.