Font Optimization

🔤 What is Font Optimization?

Next.js automatically optimizes fonts by self-hosting Google Fonts and other web fonts. This eliminates external network requests, improves privacy, and prevents layout shift for better performance and user experience.


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

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

export default function Page() {
  return <h1 className={inter.className}>Hello World</h1>
}

Key Font Features

🚀

Self-Hosting

Fonts are automatically downloaded and hosted

No External Requests Privacy Faster

📏

Zero Layout Shift

Prevents content jumping during font load

CLS Score Stable Layout Better UX

🎨

Google Fonts

Easy integration with 1000+ Google Fonts

Inter Roboto Open Sans

💾

Local Fonts

Use custom font files from your project

TTF OTF WOFF2

🔹 Using Google Fonts

Import any Google Font directly from next/font/google. Next.js automatically downloads and self-hosts the font files at build time, eliminating external requests for better performance.

import { Inter, Roboto } from 'next/font/google'

// Configure Inter font
const inter = Inter({ 
  subsets: ['latin'],
  weight: ['400', '700']
})

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

export default function Page() {
  return (
    <div>
      <h1 className={inter.className}>Title with Inter</h1>
      <p className={roboto.className}>Text with Roboto</p>
    </div>
  )
}

Result:

✅ Fonts loaded from your domain

✅ No layout shift during load

✅ Optimized font file sizes

🔹 Global Font in Layout

Apply fonts globally by adding them to your root layout. This ensures consistent typography across your entire application without repeating font imports in every component.

// app/layout.js
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>
  )
}

Benefits of global fonts:

Consistent typography across all pages
Single font import for entire app
Easier maintenance and updates
Better performance with shared font loading

🔹 Variable Fonts

Variable fonts contain multiple font weights and styles in a single file, reducing file size and improving performance. They're automatically optimized by Next.js.

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

// Variable font - no weight needed
const inter = Inter({ 
  subsets: ['latin'],
  variable: '--font-inter'
})

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

🔸 Use in CSS

/* globals.css */
body {
  font-family: var(--font-inter);
}

h1 {
  font-weight: 700; /* Any weight available */
}

🔹 Local Custom Fonts

Use your own font files by placing them in your project and importing with next/font/local. This is perfect for brand-specific or custom typography.

🔸 Setup

import localFont from 'next/font/local'

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

export default function Page() {
  return <h1 className={myFont.className}>Custom Font</h1>
}

🔸 Multiple Weights

const myFont = localFont({
  src: [
    {
      path: './fonts/my-font-regular.woff2',
      weight: '400',
    },
    {
      path: './fonts/my-font-bold.woff2',
      weight: '700',
    },
  ],
})

🔹 Font Display Strategies

Control how fonts are displayed during loading with the display property. This affects the user experience while fonts are being downloaded.

Display Options:

swap (default): Show fallback font, then swap to custom font
optional: Use custom font only if available quickly
block: Hide text briefly until font loads
fallback: Brief block period, then swap

const inter = Inter({ 
  subsets: ['latin'],
  display: 'swap', // Recommended for best UX
})