mediumFrontend

How does next/font work and why does it improve performance?

Q: How does next/font work and why does it improve performance?

**TL;DR.** next/font **downloads and self-hosts** fonts (Google or local) **at build time**, removing external requests and using size-adjust /fallback metrics to **eliminate layout shift** (CLS). It also **strips unused glyphs**, improving load performance and **privacy**. Google Fonts (build time) self-hosted subset + size-adjust <path class='d-edge-accent' d='

733 views

Understand the problem

Self-hosting fonts with zero layout shift.

nextjsnext-fontfontsperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Load and apply a Google font

// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });

export default function RootLayout({ children }) {
  return <html className={inter.className}><body>{children}</body></html>;
}
// Font is self-hosted, subset, and size-adjusted — no external request, no CLS.

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is error.js in Next.js and how does error handling work in the App Router?

What is the difference between build-time and runtime environment variables in Next.js?