Optimizing Fonts - Next.js Full-Stack

next/font automatically optimizes your fonts (including custom fonts) and removes external network requests for improved privacy and performance.

Google Fonts

Automatically self-host any Google Font. Fonts are included in the deployment and served from the same domain.

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

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

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}