Variable Fonts

Setup

When viewing these pages, it's advised that you use a Chromium browser such as Google Chrome or Microsoft Edge.

To see the problems discussed with maximum impact, please enable Throttling , tick the "disable cache" button and remember to refresh the browser for subsequent visits to each page.

What is a variable font?

Unlike traditional fonts, a variable font is configured using vectors in such a way as it can be customised in the browser.

In traditional fonts, should you want to define font weights or italics you need to define them in the browser and alias them to the same font name, when that font is used it then loads in.

There are a few things that are less than ideal with this method, firstly what do you show before the font has loaded in?

There are a couple of options here including Flash of Unstyled Text (FOUT), Flash of Invisible Text (FOIT) and Flash of Faux Text (FOFT).

Problems with FOUT

A Flash of Unstyled Text doesn't necessarily mean that the text has no style, however it means that it'll show a fallback font and then swap out when the time is right to the correct font.

• Firstly this can cause a reflow as the fallback font may not be the same size as your desired font.
• When loading additional font weights this can cause additional reflows, even though we can use FOFT to mitigate this.
• For areas not using FOFT, text will update at different times.
• It's a lot of data for the client to download.

Problems with FOUT

A Flash of Invisible Text means that the browser will reserve the space that it think it'll need (based on a fallback font) until the desired font has loaded.

This compounds the issues with FOIT, with the undesirable experience of white space, and having to manage what happens when the desired font fails to load.

• Text doesnt show until the font has loaded.
• FOFT doesn't apply in this situation.
• You have to configure how the browser handles failures to load.

Problems with FOFT

A Flash of Faux Text is a relatively new idea in which we let the browser load the roman (not italic, regular weight) version of the custom font, and let the browser approximate the weight / italic slant until it's loaded the real font in.

• This doesnt work everywhere, and requires some mental gymnastics to work.
• Still has the problems of FOUT, yet they're not quite as extreme.

Variable Fonts

Whilst not the perfect solution, because a variable font exists in a configurable format, you only need to download it once, this doesnt solve the problems of FOIT or FOUT, however it does mean you can eliminate the need for FOFT.

• Modern Browser Only (sorry IE11)
• Fonts must be built as variable fonts