Optimizing Fonts
next/font self-hosts fonts automatically for zero layout shift and no external requests.
Syntax
const inter = Inter({ subsets: ['latin'] });The next/font module optimizes web fonts at build time. It downloads Google Fonts (or your local files), self-hosts them with your deployment, and removes the render-blocking network request — eliminating layout shift and improving performance and privacy.
Usage
Import a font loader, call it with the options you want, and apply its generated className.
Example
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
);
}When to use it
- A team uses next/font/google to self-host Inter so there is zero layout shift and no Google Fonts CDN request.
- A brand uses a local custom typeface loaded via next/font/local, which Next.js subsets and caches automatically.
- A developer applies a font CSS variable from next/font to Tailwind's fontFamily config to use the font across utilities.
More examples
Google Font with next/font
next/font/google downloads and self-hosts the font at build time — no requests to Google at runtime.
// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
);
}Local font file
localFont loads a font file from the project, exposing it as a CSS variable for Tailwind or custom CSS.
// app/layout.tsx
import localFont from 'next/font/local';
const brand = localFont({
src: './fonts/BrandFont.woff2',
variable: '--font-brand',
});
export default function RootLayout({ children }: { children: React.ReactNode }) {
return <html className={brand.variable}><body>{children}</body></html>;
}Font variable in Tailwind config
Referencing the CSS variable in Tailwind config lets you use font-brand as a utility class anywhere in the app.
// tailwind.config.ts
export default {
theme: {
extend: {
fontFamily: {
brand: ['var(--font-brand)', 'sans-serif'],
},
},
},
};
Discussion