Variable fonts, also known as OpenType Font Variations, became available on the web in the mid-2010s and present some exciting possibilities to designers and developers alike. Unlike traditional statically loaded fonts, a variable font grants access to various style axes, including weight, width, slant, color temperature, and many more, depending on your selection.
But how are variable fonts different from conventional fonts, and how can we use them on our websites?
Conventional fonts allow for a maximum of nine weights, set by the font-weight style attribute in increments of 100 from 100 to 900 (many fonts provide even less granularity than this). Variable fonts, however, could allow for a font weight of any number between 100 and 900, for instance, 675 or 437. This smooth range of value also allows these previously locked font styles to become animatable through CSS animation or transition properties.
When working with Variable fonts in CSS, traditional properties such as font-weight will still work, as outlined in MDN’s docs, and more obscure values that don’t correspond to commonly used CSS properties can be accessed via the font-variation-settings property.
The power of variable fonts extends beyond creative versatility, however. Historically, each permutation of a font type – bold, semi-bold, bold italic, etc. – must be loaded as its own separate file. These files can prove extremely costly to page speed scores and often force designers and developers to limit themselves to as few variations of a font as they can possibly get away with. Variable fonts, on the other hand, consolidate each and every available variation into one file. Pound-for-pound designs with extensive font variations can present huge savings on load times while still opening up much more flexibility.
So, how do we implement variable fonts on a website? Luckily, if you’ve ever browsed on Google Fonts, the process should be pretty familiar to you. Visit fonts.google.com, and you’ll see an option under ‘Filters’ for ‘Variable.’ This will limit the list of available fonts to selections that include at least one ‘Variable Axis.’ We’ll take Open Sans as an example, which includes two variable axes.
Navigate over to the ‘Type tester’ tab, and you can see Open Sans as a variable font in action. In this example, you can see italic text engaged, weight set to 581, and width set to 84.9. Other fonts may have different axes available, which can have even more profound effects on the appearance of the font.
Those of you familiar with Google Fonts would probably (reasonably) expect that we would follow the standard process to import a font onto the site – select a range of fonts in the website’s UI and then go to the ‘Use on the web’ feature to generate the <link> element. I picked 400 Regular and 600 SemiBold in this example. If we drop this into the <head> of our website, we should have access to this variable font, right?
Unfortunately, if you drop this Google-generated code as-is into your website, you’ll find that the Variable font feature is not active, and only the Regular and the Bold weights are available. This is because the Google Fonts UI still generates this <link> code using the traditional font import convention.
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
When you consult the Google documentation on loading variable fonts, you’ll see the updated syntax for calling a variable font is:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap" rel="stylesheet">
This is almost the exact same syntax as what Google generated in our example, except for two key differences. The <link> that Google generated uses a single semicolon instead of the two periods between the minimum and maximum value. The other key difference is the range of values that we selected. To make the most use of any variable font, you should pick the minimum and maximum available weights.
So, the quickest and easiest way to get a working variable font is to select a font with at least one variable axis, select the minimum and maximum values, generate the <link> attribute, and then change the semicolon to two periods. One final caveat: if you are trying to include multiple fonts at a time, this will jumble the syntax and make it harder to make that quick change to get it to work. For instance, if we add Montserrat to our font selections, the Google-generated <link> will look like this:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;1,900&family=Open+Sans:wght@300;800&display=swap" rel="stylesheet">
The quick way to get around this is to import the two links separately.
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap" rel="stylesheet">
If you want to see how our team has leveraged variable fonts, I recommend checking out our Labs™ project - The Next F1 Race. This dynamic single-page site features individual graphics cards for each of the Formula 1 races in a given season. As the user scrolls down the page, the race location name expands or contracts when the primary card is in view.
However, if you have any questions about variable fonts and how to use them on your site - feel free to reach out!
