Variable fonts are one of the greatest innovations in web typography, offering more flexibility and efficiency in design.
Variable fonts have been around for a couple of years now and are starting to get some real traction. The number of variable font packages available continues to grow, with several premium typefaces among them. So if you're not already using variable fonts, now is a good time to get acquainted with them.
So what are variable fonts?
A variable font is a single font file that behaves like multiple fonts.
Basically, variable fonts allow a type designer to create key designs, enabling CSS authors to interpolate freely using parameters called "axes". Common axes are weight, width, slant, and optical-size, but they can really be anything — it's up to the type designer.
What's so great about variable fonts?
Apart from the obvious — tweaking the look of a particular font to be just right — it allows us designers to use many more weights while reducing the overall font file payload. For most implementations, you need four fonts: regular, italic, bold, bold-italic. It's not uncommon for this to add up to more than half a megabyte. When adding a black font for headings, and perhaps a thin font for pull quotes, the payload starts to matter. The larger the payload, the longer the user has to wait to read your content, or experience the FOIT.
But with variable fonts, you only need to download one file. Although it's a bit larger than one regular font file, it's often way smaller than all the individual fonts combined that you would use otherwise.
Basically, variable fonts give you more choices for a smaller file size. That's valuable for us web designers and developers!
We won't go into depth on the technical aspects of variable fonts in this article; there are many other resources explaining that. This post provides a quick guide to get started with variable fonts, including how to use them in TinyMCE.
Getting started
Loading and using fonts is done through CSS, and variable fonts are no different.
If you are using the TinyMCE WYSIWYG HTML editor, you can use variable fonts within the editor simply by configuring the TinyMCE CSS. You can do this using either the content_css or the content_style options when initializing the editor (assuming you are using the regular iframe based TinyMCE). Read more about using these options in our blog post about how to change the default font in the editor.
Including the font file
The first step is to load the font. This is done via @font-face, or @import if you are using a font delivery service like Google fonts.
Below is an example using the open source Inter font.
@font-face {
src: url("<path-to-file>/Inter.var.woff2") format("woff2");
font-family: 'Inter';
font-weight: 100 900;
font-style: oblique 0deg 10deg;
}
body {
font-family: 'Inter', sans-serif;
}Take a look at font-weight. It includes a range of weights that are available to the rest of the CSS, in this case, the 100 to 900 weights. We have also included the full range of slant available in the font.
Note that it is up to the font designer to define the allowed options. Therefore you have to check exactly what options a particular font supports with the font manufacturer.
To learn more about how to use @font-face properly, including all variable options and fallbacks for older browsers, this article from css-tricks.com provides a great overview.
Different ways to use variable fonts in CSS
There are many different ways to declare the appearance of a variable font, and several new properties have been introduced in CSS to take full advantage of these new possibilities.
Using "traditional" properties
You can use font-weight and font-style to set the weight and slant of a font (if the font supports it).
Continuing the example above with the Inter font, we can, for example, write:
h1 {
font-weight: 900;
font-style: oblique 5deg;
}
strong {
font-weight: 721; /* Any number between 100 and 900 is allowed */
}Older browsers will degrade nicely, reverting to the closest supported value of the fallback font.
Using Axes
The OpenType specification declares five standard axes as four letter strings:
- Weight as
wght - Width as
wdth - Italic as
ital - Optical size as
opsz - Slant as
slnt
A variable font might support all or none of these, and font designers are free to create their own axis. To know what axes are supported, you need to consult the documentation for each font.
Note: A standard axis is defined using four lower case letters, and custom axes are defined using four UPPERCASE letters.
Use the font-variation-settings property to access all axes available.
For example, this gives the same result as the previous example:
h1 {
font-variation-settings: "wght" 900, "slnt" -5;
}
strong {
font-variation-settings: "wght" 721;
}Example
Below is a complete example using many different font weights and styles in TinyMCE. Doing this the "regular" way would have required loading five font files, while this example requires only one.
What next?
If you're not yet familiar with our TinyMCE WYSIWYG HTML editor and how it provides users with a great content creation experience, you can start by checking out the full featured demo.
For developers, integrating TinyMCE with your own applications is easy. Get a free API Key (including a 14 day trial of all the premium plugins) and get started within minutes. Or contact us for more information about how to upgrade your existing content platforms to take advantage of the power and simplicity provided by TinyMCE.
Further reading
- The Variable Fonts Guide from MDN provides information on how to use axes
- Google provides an introduction to variable fonts
- Play around with variable fonts and explore what they can do
- Learn more about how to properly use
@font-facein this article from css-tricks.com - A comprehensive list of available variable fonts
- Google Fonts APIv2 Beta supporting variable fonts
- Weird things variable fonts can do
- An in-depth guide on how to find the axes of a variable font if no documentation is available
- How to add neon fonts and glowing text effects
