next/font: Zero Layout Shift Fonts
next/font bundles fonts with your app at build time, serving them from your own domain to eliminate layout shift and extra network requests. It's the standard for any Next.js app. The footgun is using `<link>` tags, which negates all benefits.
WHY IT EXISTS: Web fonts loaded from external services can be slow, blocking rendering and causing Cumulative Layout Shift (CLS) — that annoying jump in content when the font finally loads. They also send user IP addresses to third parties like Google, which can be a privacy concern.
THE MENTAL MODEL: next/font is a build-time font bundler. Imagine it downloads the font files for you when you build your site, packages them up with your code, and automatically writes the perfect CSS to use them. The user's browser never talks to Google Fonts; it just gets the fonts directly from your server.
HOW IT WORKS: You import a specific font, like Inter from next/font/google, or a local file with next/font/local. The tool downloads that font during the build process. It generates optimized CSS, including size-adjust descriptors, to create a fallback font that closely matches the dimensions of the final web font. This prevents text from reflowing when the real font loads, eliminating layout shift. All font files are served from the same domain as your application, removing the need for an extra round-trip network request and improving privacy.
WHEN TO USE IT: Use it by default for all fonts in any Next.js project. It's the best practice for performance, user experience, and privacy. It works seamlessly for both variable fonts and standard static fonts in both the App and Pages routers.
WHEN NOT TO USE IT: There are very few reasons not to use it. If you have an extremely niche case where fonts must be loaded dynamically from a CMS and cannot be known at build time, you might need a different solution. For over 99% of projects, next/font is the right choice.
ONE CANONICAL EXAMPLE: In a Next.js App Router project, you define your primary font in the root layout.tsx file. First, import it: import { Inter } from 'next/font/google';. Then, initialize it: const inter = Inter({ subsets: ['latin'] });. Finally, apply its class name to your body tag: <body className={inter.className}>. This applies the font globally with zero layout shift.
Read the original → nextjs.org
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.