Next.js Font Optimization details how the built-in next/font package self-hosts Google Fonts and local custom typography at build time.
The next/font module downloads font files at build time and hosts them statically alongside your application assets. This eliminates render-blocking external network requests to Google servers.
next/font/googleImport your desired font family directly from next/font/google:
// app/layout.tsx
import { Inter, Roboto_Mono } from 'next/font/google';
import './globals.css';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
const robotoMono = Roboto_Mono({
subsets: ['latin'],
display: 'swap',
variable: '--font-roboto-mono',
});
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
<body className={inter.className}>{children}</body>
</html>
);
}
next/font/localFor proprietary custom font files (.woff2, .ttf), use the next/font/local loader:
// app/fonts.ts
import localFont from 'next/font/local';
export const customSans = localFont({
src: [
{
path: '../public/fonts/CustomFont-Regular.woff2',
weight: '400',
style: 'normal',
},
{
path: '../public/fonts/CustomFont-Bold.woff2',
weight: '700',
style: 'normal',
},
],
variable: '--font-custom-sans',
});
variable options with Tailwind CSS settings for consistent design systems.subsets: ['latin']) to reduce font payload sizes.next/font optimizes web typography by self-hosting font files and eliminating external network dependencies to ensure zero layout shift.
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With