Using Fonts in Next.js

Lee starts with a standard Next.js 13 app, which uses the system font stack. Adding Roboto through a Google Fonts link works, but the fallback font loads first and the app makes external requests for the font. On slow connections, this can mean a noticeable delay and layout shift.

Lee installs the separate `@next/font` package and imports Roboto in the Pages Router app. He sets the Latin subset and chooses weights, then applies the generated class to the page. Next.js self-hosts the font and adds a fallback font designed to reduce layout shift.

The same approach works with other Google Fonts, including Inter and IBM Plex. For variable fonts such as Inter, Lee recommends leaving out explicit weights where possible, which can improve performance.

Local font files work too, using a source path when defining the font. For Tailwind CSS, Lee applies a named CSS variable from the font and maps that variable to Tailwind’s sans family in the config. In the beta App Directory, he applies the font to the root layout.