Fonts with next/font

6 min read

Zero-Layout-Shift Font Loading

next/font downloads Google Fonts at build time, self-hosts them alongside your app, and injects the font-display: swap CSS — all without any runtime requests to Google. This improves privacy and eliminates the network round-trip penalty.

tsx

// src/app/layout.tsx
import { Inter, Playfair_Display } from "next/font/google";
import type { ReactNode } from "react";

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

const playfair = Playfair_Display({
  subsets: ["latin"],
  variable: "--font-playfair",
  weight: ["400", "700"],
});

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

You can then use the CSS variables (--font-inter, --font-playfair) in your Tailwind config or global CSS to apply them to elements.

For local fonts (custom typefaces), use next/font/local with the src pointing to your font file in the public/ directory.

Ready to test yourself?

Practice Next.js— quiz & coding exercises