CodePark/ questions / Images, fonts & performance
START PRACTICINGPRACTICE
Frontend question · Next.js › Images, fonts & performance

What does next/font do and why use it?

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

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

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

next/font self-hosts your fonts and stops text from jumping when they load.

Self-hosting. It loads Google Fonts or local font files and serves them with your other static assets. Font files are downloaded at build time. So browsers make no requests to Google. This helps privacy and avoids an extra connection.

Less layout shift. It generates a fallback font with adjusted metrics (sizes and spacing). So text doesn't jump when the web font arrives.

Faster loading. Font files are preloaded. You can also subset them to only the characters you need.

Usage. Call the loader at module scope (top level of the file). Then apply the returned className or CSS variable, often on html or body in the root layout.

  • next/font self-hosts Google and local fonts.
  • Browsers make no requests to Google.
  • Fallback fonts with adjusted metrics reduce CLS, the layout jump.
  • Fonts are preloaded and can be subset.
  • Apply the font with the returned className or variable.