MediumFrontend4 min read

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

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

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block says which version it ran on. ## 1. Why This Even Matters — A Story First Using a font from a third-party server is like borrowing the neighbour ladder every time you need it: you knock, you wait, and your work pauses. next/font buys your own ladder of exactly the right height and keeps it in the shed. And while you walk to the shed, it gives you a stepstool of the same height, so nothing on the wall moves when you switch. ## 2. The Core Idea 📌 **Interview term: next/font** — the Next.js

738 views

52 of 129

The problem

Question presented to candidate: "Why would you use next/font instead of a Google Fonts link tag, and what exactly does it generate?"

What a strong answer should cover:

next/font downloads Google fonts at build time (or uses local files) and serves them from your own domain: no request to Google at runtime.
It generates @font-face rules and a class or CSS variable to apply the font.
It creates a fallback font face using a local system font with size-adjust and ascent/descent overrides so the fallback takes the same space, reducing layout shift.
It preloads the font file for the pages that use it.
Subsetting (for Google fonts) and display control file size and rendering behaviour.

Clarifying questions expected:

"Is the font from Google or a licensed local file?" — next/font/google or next/font/local.
"Which weights and subsets are really used?" — fewer means smaller files.

Code / implementation expected: Yes — a local font with a CSS variable.

nextjs
next-font
fonts
performance

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block says which version it ran on.

1. Why This Even Matters — A Story First

Using a font from a third-party server is like borrowing the neighbour ladder every time you need it: you knock, you wait, and your work pauses. next/font buys your own ladder of exactly the right height and keeps it in the shed. And while you walk to the shed, it gives you a stepstool of the same height, so nothing on t

The solution is hidden so you can try first

4 min read · 8 sections

Read the code

A local font and a Google font as CSS variables

// app/fonts.ts
import localFont from "next/font/local";
import { Inter } from "next/font/google";

export const brand = localFont({
  src: [{ path: "./fonts/Brand-Regular.woff2", weight: "400" }, { path: "./fonts/Brand-Bold.woff2", weight: "700" }],
  display: "swap",
  variable: "--font-brand",
});

export const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter" });

// app/layout.tsx
import { brand, inter } from "./fonts";
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${brand.variable} ${inter.variable}`}>
      <body style={{ fontFamily: "var(--font-inter)" }}>{children}</body>
    </html>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

No comments yet. Share how you would answer it.

Question 52 of 129 in Next.js

Keep your momentum going.

Mark this question solved to track your progress, then take the next one while it is fresh.

All Next.js questions

Up nextMedium→

How do Server Actions differ from Route Handlers in Next.js?

Continue