Next.js Font Optimization

Next.js Font Optimization: Zero Layout Shift with next/font

Next.js font optimization uses the next/font module to download Google Fonts at build time and serve them from your own domain. Because the browser never contacts external Google font servers, pages render faster and protect user privacy.

Standard stylesheet font links block rendering or swap text sizes abruptly, causing Cumulative Layout Shift (CLS). Next.js measures fallback system font metrics automatically so text stays steady while custom fonts load.

Loading Google Fonts in app/layout.tsx

Import any Google Font function from next/font/google, configure subsets and CSS variables, and attach the class name to <html> or <body>.

// app/layout.tsx
import { Inter, JetBrains_Mono } from 'next/font/google';
import './globals.css';

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

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

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

Loading Self-Hosted Local Fonts

For licensed brand fonts stored inside your repository, use localFont from next/font/local and point to .woff2 files.

// app/fonts.ts
import localFont from 'next/font/local';

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

Connecting Fonts to Tailwind CSS

Export the variable option from next/font and map --font-sans or --font-mono in your globals.css theme tokens. This lets utility classes like font-mono apply your self-hosted font cleanly across every component.

Common Mistakes

• Importing next/font inside every small component: Calling the font loader repeatedly creates duplicate font definitions; define fonts once in app/layout.tsx or app/fonts.ts.
• Omitting the subsets option: Always specify subsets: ['latin'] (or the needed script) to keep font file payloads small.
• Loading non-variable fonts without weight: Non-variable Google Fonts require an explicit weight array such as weight: ['400', '700'].

Frequently Asked Questions

Does next/font/google send user IP addresses to Google?

No, Next.js downloads the font files once during next build and serves them from your own host, so browsers make zero requests to Google.

Should I use .woff2 or .ttf for next/font/local?

Always prefer .woff2 files because they provide stronger compression and smaller downloads across all modern browsers.

Can I apply a special font to just one page or heading?

Yes, export the secondary font from app/fonts.ts, import it inside that specific page or component, and apply secondaryFont.className.