Problems with font distribution, and why versioning matters

When we refreshed the Measured visual identity, a website rebuild was always part of that scope.

We expected to make some careful typographic refinements in that process. But what followed was an unexpected deep dive into how fonts are distributed and integrated into modern web infrastructure.

This is an account of what we encountered, the choices we made, and some thoughts that may be relevant to teams using fonts — and those making and distributing them. We’ve gone quite heavy with hyperlinks by way of explaining terms if needed.

Note: Though true when we were rebuilding the site around December 2024, some of the detail of what follows has since changed. I’ve done my best to call this out when that’s the case. Hopefully the broader thrust is still useful.

The plan

When we embarked on the brand refresh and site rebuild, we landed on Inter for its many benefits — readability and ease of implementation among them.

We wanted to use next/font/google to implement the Inter Google Font for its magical ways of optimising font performance. We wanted a fast site with green Lighthouse scores. (Along with images, custom fonts are a major cause of poor site performance.)

But when we came to implementation, we ran into some blockers:

1. Inter on Google Fonts didn’t have some OpenType features and glyphs that we wanted (rounded “quotes” and commas, for example)
2. Google Fonts not having Inter Italic at all (true at the time, but no longer¹)

Inter-vention needed

So - how best to optimally integrate Inter (Italic) with Next.js if it's not available as a Google Font?

Our answer was to use next/font/local, a feature that provides similar font optimisations to next/font/google, but for self-hosted font files.

But though this method worked, performance was significantly downgraded compared to using Google Fonts, and Lighthouse scores were distinctly non-green.

There were a couple of reasons for this:

1. Downloading Inter from Rasmus’ site offers no way to subset, meaning that our self-hosted Inter files were very large (weighing in at 740kb combined)
2. It turns out next/font/local doesn’t optimise quite as well as next/font/google, which leverages Google's CDN caching

Like the good stoics we are, we dialled into problem 1 as being within our power to affect, so we looked to subset the fonts as aggressively as possible to reduce the file size and get us back into the green.

After much trial and error, we eventually managed to subset the two Inter files so that they had all the glyphs we needed while remaining as small as possible. To do this, we used fontTools to try various subsetting and optimising techniques, and FontDrop to test the output.

In the end we arrived at this command line magic spell:

pyftsubset InterVariable.ttf \
  --unicodes=U+0000,U+0020-007E,U+00A0-00AC,U+00AE-00FF,U+0131, \
            U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, \
            U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+2002, \
            U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E, \
            U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+2074, \
            U+20AC,U+2122,U+2191,U+2193,U+2212,U+FEFF \
  --layout-features=calt,ccmp,dnom,frac,kern,locl,mark,mkmk,numr \
  --flavor=woff2

The result was that our self-hosted files had a combined size of 144kb and Lighthouse performance scores were back in the green — not quite as good as they would have been with Google Fonts, but green nonetheless.

Most importantly: our site speed was fast again, and with the custom-designed true Italics and all the other typographical nuances we were after.

The need for font versioning

So how does this lead us to font versioning?

A good example is that Inter 3 didn’t have a separate file for Italics as they were handled with a variable font slant axis. When Inter 4 removed this variable axis and replaced it with a completely separate and custom designed Italic file, it took — and is still taking — tools a long time to catch up.

And because font versioning isn't really considered, someone using Inter from Google Fonts would have their italics switched from the variable font slant axis in Inter 3, to faux italics with Inter 4 overnight.

And all this without really any visibility. Google Fonts doesn't announce version changes, or even show the font version (at least not clearly that we can find — answers on a postcard).

To double check what version they were serving, we had to use FontDrop. So you really need to be tuned in to the font’s release history, and to typographical nuances in general, to have any idea about this.

Though it was a mission, digging into the details paid off for us. We were able to achieve the typographic clarity we wanted without significantly compromising performance.

Footnotes

1. Google Fonts now has all the Inter OpenType features and glyphs, plus Inter Italic, so the original problem is nearly solved. However, at time of writing, next/font/google still does not include Inter Italic. Hopefully it will be added in future — we should probably open a pull request! ↩