How do you optimize custom fonts in a Next.js application using next/font?

The next/font module lets you import fonts, including Google Fonts, directly into your project, automatically hosting the font files alongside your application and eliminating extra network requests to external font providers, while also preventing layout shift caused by fonts loading late.

import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function Layout({ children }) {
  return <html className={inter.className}><body>{children}</body></html>;
}