Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by

How to use variable fonts

Fredrik Danielsson

January 6th, 2020

Written by

Fredrik Danielsson
Fredrik Danielsson

Category

Tips & How-Tos

Tagged

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 30 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

Design
Fredrik Danielsson
byFredrik Danielsson

Fredrik is Principal Designer at Tiny, responsible for choosing the exact right shade of gray for borders and icons.

Related Articles

  • Visual depiction of Tiny and Angular integration
    Tips & How-Tos

    How to add TinyMCE 5 to a simple Angular project

    by Simon Fjeldså in Tips & How-Tos

Build beautiful content for the web with Tiny.

The rich text editing platform that helped launch Atlassian, Medium, Evernote and more.

Begin my FREE 30 day trial
Tiny Editor