Inter Font Update: Don’t rely on Google Fonts for hosting

Millions of Google Fonts user experience right now, when a font gets updated and suddenly things … shift. This happened with Inter, when it got replaced by a newer version a few weeks ago. In this video and article I’ll tell you what changed, how you can fix it on your website or in your Figma projects, and what you should be aware of to prevent these kinds of problems in the future.

Inter got updated

In a recent post, I talked about the changes that came with the update to version 4 of the popular typeface Inter. Along with significant improvements, like optical sizing, Inter 4.0 also changed its flavor quite a bit by replacing the slanted italics with true italics. So I assumed that it would not simply be replaced on Google Fonts, because this might result in text reflow at best and in a loss of functionality at worse. But I was wrong. It happened.

So if you made use of the variable font and the slant axis, you won’t be able to access it anymore with the newer version. And you most likely will see a different spacing for smaller size.

Now, what happened to millions of websites that use Google Fonts to host Inter, will happen in Figma projects as well. At the time of writing this article, it still shows the previous version of Inter, but this could change any moment as Figma irregularly updates the Google Fonts catalog. Then, you most likely will see shifts in your UI or web designs too.

What can you do about it

There are two options:

1. Embrace the changes

And update your designs when needed. There are quite some improvements when it comes to setting text in larger sizes.

2. Go back to the older version

You can also download Inter version 3 and self-host the fonts for your website. This also brings plenty of advantages when it comes to performance and GDPR compliance. If you want to learn how to do it, there is a great video by Kevin Powell that shows you step by step.

What to do when it updated in Figma

If Inter has already been updated in Figma and you want the previous version, yon need to download and install it locally. This way, it will override the Google Fonts available in Figma and access the local fonts. I tested this with another Google Font that I installed locally. But note that everyone else who works on this project has to do the same, or otherwise they will see the current version of it.

Don’t rely on Google Fonts

Because what happened with Inter now, already happened and will happy again to other fonts hosted on Google Fonts. If you want consistency, self-host your fonts. Fonts are software, so oft course they can and should be updated when things change or get improved. But situations like these remind us to be thoughtful about or type choices and how we host them.

Embrace flexible design

It also shows that we should not rely on a specific typeface and pixel-perfect typesetting. Digital design has to be flexible for accessibility and many other reasons. Sometimes a font does not load, other times it gets replaced by the user agent, and text size will often be adjusted too. We as designers sure have influence, but on the web, the user should have the control.

How did you experience the update? Tell me in the comments below!