Zero-CLS Font Optimization with next/font

1// app/layout.tsx
2import { Inter } from 'next/font/google';
3import localFont from 'next/font/local';
4import './globals.css';
5
6// 1. Google Font: Downloaded and self-hosted locally at build time!
7const inter = Inter({
8  subsets: ['latin'],
9  display: 'swap',
10  variable: '--font-inter', // CSS Variable for Tailwind
11});
12
13// 2. Local Font with multiple weights:
14const geistSans = localFont({
15  src: [
16    { path: './fonts/Geist-Regular.woff2', weight: '400', style: 'normal' },
17    { path: './fonts/Geist-Bold.woff2', weight: '700', style: 'normal' },
18  ],
19  variable: '--font-geist-sans',
20  display: 'swap',
21});
22
23export default function RootLayout({ children }: { children: React.ReactNode }) {
24  return (
25    <html lang="en" className={`${inter.variable} ${geistSans.variable}`}>
26      <body className="font-sans antialiased">{children}</body>
27    </html>
28  );
29}