June 26, 2020

Adding Google Fonts to Next.js

How to load custom fonts fast and asynchronously

Update: 30th April 2021

As of Next.js 10.2, Google Fonts are automatically optimized.

A few months back, I hit a snag in projects where I used the "System Font Stack". Considering that this wasn't the first time system fonts have caused problems for Chrome on Mac, it no longer felt appropriate to use "the fastest font", and instead ensure "the most consistent experience" amongst all browsers.

Google Fonts offers a vast collection of free-to-use fonts; including recent updates to leverage font-display. With "Inter" as the front-runner for my system font replacement, using Google's service was a no-brainer.

However, relying on a third-party style sheet meant tackling dreaded render-blocking CSS.

After some initial research into strategies for deferring CSS, I caught up with Harry Roberts to find the optimum solution. At the time, he was in the middle of writing "The Fastest Google Fonts". Although his strategy worked great for plain HTML pages, it didn't play nicely with React.js (specifically in Next.js).


The good news is, if you're using Next.js you don't have to worry about any of this anymore:

Introducing next-google-fonts.

next-google-fonts is a super tiny helper for loading Google Fonts fast and asynchronously in Next.js.

The bad news is, you still have to choose a font.