Skip to main content
The next/font module automatically optimizes your fonts and removes external network requests for improved privacy and performance. It includes built-in self-hosting for any font file, meaning you can load web fonts with no layout shift.

​
Google fonts

Any Google Font is automatically self-hosted. Fonts are stored as static assets and served from the same domain as your deployment—no requests are made to Google from the browser. Import your chosen font from next/font/google and call it as a function: 
import { Geist } from 'next/font/google'

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}
Use variable fonts for the best performance and flexibility. They support multiple weights and styles in a single file.

​
Non-variable fonts

For fonts that don’t have a variable version, specify the weight: 
import { Roboto } from 'next/font/google'

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

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

​
Local fonts

Use localFont from next/font/local to load a custom font file. The src path is resolved relative to the file where localFont is called: 
import localFont from 'next/font/local'

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

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}
To define multiple files for a single font family, pass an array to src: 
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',
    },
  ],
})

​
Font variables

Use a CSS variable to apply a font via Tailwind CSS or custom CSS, instead of using the className directly: 
import { Geist, Geist_Mono } from 'next/font/google'

const geistSans = Geist({
  subsets: ['latin'],
  variable: '--font-geist-sans',
})

const geistMono = Geist_Mono({
  subsets: ['latin'],
  variable: '--font-geist-mono',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable}`}
    >
      <body>{children}</body>
    </html>
  )
}
Then reference the variable in your CSS:
app/globals.css
body {
  font-family: var(--font-geist-sans);
}

code {
  font-family: var(--font-geist-mono);
}

​
Options reference

​
next/font/google options

​
subsets
string[]
required
The Unicode subsets to preload. Specify the subset(s) your application uses to reduce the initial font file size.Example: ['latin'], ['latin', 'latin-ext']
​
weight
string | string[]
The font weight(s) to include. Required for non-variable fonts. Use 'variable' to load the variable font.Example: '400', ['400', '700'], 'variable'
​
style
string | string[]
default:"'normal'"
The font style(s) to include.Example: 'normal', 'italic', ['normal', 'italic']
​
display
string
default:"'swap'"
The CSS font-display property. Controls the font loading behavior.Values: 'auto', 'block', 'swap', 'fallback', 'optional'
​
variable
string
A CSS custom property name for the font (e.g. '--font-sans'). When provided, the function returns a NextFontWithVariable object with a variable string in addition to className and style.
​
preload
boolean
default:"true"
Whether to preload the font. Set to false to prevent generating a <link rel="preload"> tag.
​
fallback
string[]
Fallback font families to use if the custom font fails to load.Example: ['system-ui', 'sans-serif']
​
adjustFontFallback
boolean
default:"true"
Whether to generate an automatic fallback font with adjusted metrics to reduce Cumulative Layout Shift.
​
axes
string[]
Additional variable font axes to include. Only available for variable fonts that support extra axes.

​
next/font/local options

​
src
string | object[]
required
The path to the font file relative to the file calling localFont, or an array of objects with path, weight, and style for multiple font files.
​
display
string
default:"'swap'"
The CSS font-display property. Values: 'auto', 'block', 'swap', 'fallback', 'optional'.
​
variable
string
A CSS custom property name (e.g. '--font-custom') returned as the variable property.
​
preload
boolean
default:"true"
Whether to generate a <link rel="preload"> tag for this font.
​
fallback
string[]
Fallback font families.
​
adjustFontFallback
boolean | string
default:"'Arial'"
A fallback font to use for metrics adjustment ('Arial' or 'Times New Roman'), or false to disable.

​
Scoping fonts

Fonts are scoped to the component they are used in. To apply a font to the entire application, add it to the root layout. To apply a font to a section, add it to the layout for that segment:
app/dashboard/layout.tsx
import { Roboto_Mono } from 'next/font/google'

const robotoMono = Roboto_Mono({
  subsets: ['latin'],
})

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className={robotoMono.className}>
      {children}
    </div>
  )
}

Build docs developers (and LLMs) love

Get started for freeTalk to us