next/font

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.

Load each font family and weight through next/font, expose it as a CSS variable when the design system needs composition, and request only the subsets and styles actually used. Apply the variable at the highest scope that truly shares the font. Self-hosting removes a runtime request to a font provider; it does not make an oversized font set free. Too many weights, families, or scripts increase build output and compete with critical page resources. Inspect the production network trace for external font requests, verify generated files and preload behavior, and compare CLS before and after the font loads. Test missing glyphs in every supported language and confirm the fallback metric remains stable.

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',
});

What it does for you

Google fonts

Local fonts

Code

External links

Exercise

Progress

Comments 0