next/font

~18 min · next/font, self-hosted fonts, CLS

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

What it does for you

next/font downloads fonts at build time, self-hosts them with your static assets (no requests to Google), and uses CSS size-adjust to remove the font swap layout shift. One import, zero network privacy concerns, zero CLS from font loading.

Google fonts

Import from next/font/google; pick the family, choose subsets, optionally name a variable to use in CSS variables (Tailwind-friendly).

Local fonts

Drop the woff2 files anywhere in your repo and import from next/font/local. Useful for proprietary or custom fonts.

Code

Google fonts via next/font·tsx

import { Inter, JetBrains_Mono } from 'next/font/google';

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

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

Local fonts·tsx

import localFont from 'next/font/local';

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

External links

next/font

Exercise

Add next/font to your project with one Google font for body text and one for headings. Confirm DevTools' Network tab shows no requests to fonts.googleapis.com at runtime.