Frontend Beauty
ESC

Type to search the knowledge base.

Font Optimization next/font

next/font self-hosts fonts, subsets, and CSS variables to kill layout shift and extra network hops to Google.

intermediate3 min read
  • nextjs
  • font-optimization

next/font loads fonts with automatic self-hosting, subsetting, and zero layout shift when configured with display: 'swap' and size metrics. You avoid render-blocking third-party font CSS when possible.

Docs: Font Optimization.

Google font example

// app/layout.tsx
import { Inter } from 'next/font/google';

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.variable}>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

Local fonts

import localFont from 'next/font/local';

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

Why it helps Core Web Vitals

  • Fewer third-party connections.
  • Preloaded font files as needed.
  • Optional size-adjust to reduce CLS.
  • CSS variables for design systems.

Tips

Limit weights and subsets. Do not load every axis of a variable font if unused. Pair with a system fallback stack in CSS.

Interview out-loud

“next/font self-hosts Google or local fonts, subsets them, and exposes className or CSS variables. I use display swap, limit weights, and apply fonts in the root layout to avoid layout shift and extra font CDN round-trips.”

Further reading

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Quick self-test

Explain the concept in 60 seconds, write a minimal code sample from memory, name one footgun, and point to the primary docs. If any of those fail, reread the worked example and rebuild it in a scratch file until the model sticks under interview pressure.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides