Font Optimization in Next.js – Self-Hosting Google and Local Fonts with next/font

Introducing `next/font`

The next/font module automatically optimizes fonts and removes external network requests. Fonts are self-hosted and served as static assets, improving performance and preventing layout shift.

How to Use

Import a font from next/font/google or next/font/local, call it as a function, and apply the generated className to your layout or component:

// app/layout.tsx
import { Geist } from 'next/font/google'

const geist = Geist({ subsets: ['latin'] })

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

Using Google Fonts

Google Fonts can be self-hosted using next/font/google. Fonts are stored as static assets and served from your own domain, with no requests sent to Google.

Variable fonts are recommended for better performance. If not available, specify a weight:

// app/layout.tsx
import { Roboto } from 'next/font/google'

const roboto = Roboto({ weight: '400', subsets: ['latin'] })

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

Using Local Fonts

To use a local font, import it from next/font/local and specify the path to the font file. Fonts can be stored in the public folder or colocated inside the app directory:

// app/layout.tsx
import localFont from 'next/font/local'

const myFont = localFont({ src: './my-font.woff2' })

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

Using Multiple Files for a Font Family

You can define multiple font files with different weights and styles:

const roboto = localFont({
  src: [
    { path: './Roboto-Regular.woff2', weight: '400', style: 'normal' },
    { path: './Roboto-Italic.woff2', weight: '400', style: 'italic' },
    { path: './Roboto-Bold.woff2', weight: '700', style: 'normal' },
    { path: './Roboto-BoldItalic.woff2', weight: '700', style: 'italic' },
  ],
})

Conclusion

The next/font module in Next.js offers a simple and powerful way to optimize fonts. Whether using Google Fonts or local assets, you can improve performance, reduce layout shift, and deliver a fast, beautiful experience across your application.