Skip to main content
next/font automatically optimizes fonts and removes external network requests. It includes built-in self-hosting for any font file, preventing layout shift and improving loading performance. Google Fonts are downloaded at build time and served with your static assets. No requests are sent to Google by the browser.
app/layout.js
import { Inter } from 'next/font/google'

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

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

​
Options

​
src
string | object[]
The path to the font file, relative to where the font loader is called. Used in next/font/local only.
  • String: './fonts/my-font.woff2'
  • Array of objects for multiple weights/styles: 
    src: [
  { path: './Roboto-Regular.woff2', weight: '400', style: 'normal' },
  { path: './Roboto-Bold.woff2', weight: '700', style: 'normal' },
]
Required for next/font/local.
​
weight
string | string[]
The font weight. Can be:
  • A single value: '400'
  • A range for variable fonts: '100 900'
  • An array for non-variable fonts: ['400', '700']
Required for non-variable fonts.
​
style
string | string[]
The font style. Defaults to 'normal'. Accepts:
  • A string: 'italic' or 'normal'
  • An array for multiple styles (Google fonts only): ['italic', 'normal']
​
subsets
string[]
Subsets to preload, defined as an array of string names. Used in next/font/google only.
subsets: ['latin']
When preload is true (the default), a <link rel="preload"> tag is injected for each specified subset.
​
axes
string[]
Additional variable font axes to include. Only the weight axis is included by default to minimize file size. Available values depend on the specific font.
axes: ['slnt'] // for Inter variable font
Used in next/font/google only.
​
display
string
default:"swap"
The CSS font-display value. Accepts 'auto', 'block', 'swap', 'fallback', or 'optional'.
​
preload
boolean
default:"true"
Whether to preload the font. When true, a <link rel="preload"> tag is injected.Preloading scope depends on where the font is used:
  • In a page file — preloaded for that route only
  • In a layout file — preloaded for all routes wrapped by that layout
  • In the root layout — preloaded for all routes
​
fallback
string[]
Fallback fonts to use if the primary font cannot be loaded.
fallback: ['system-ui', 'arial']
​
adjustFontFallback
boolean | string
default:"true"
Automatically adjusts the fallback font to reduce Cumulative Layout Shift (CLS).
  • For next/font/google: a boolean (default true)
  • For next/font/local: 'Arial' (default), 'Times New Roman', or false
​
variable
string
The CSS custom property name for use with the CSS variable method.
variable: '--font-inter'
Exposes the font as var(--font-inter) in CSS.
​
declarations
object[]
Additional @font-face descriptor key-value pairs. Used in next/font/local only.
declarations: [{ prop: 'ascent-override', value: '90%' }]

​
Applying fonts

The font loader returns an object with three ways to apply the font:
A read-only CSS class that applies the font family and fallback.
<p className={inter.className}>Hello, Next.js!</p>
A read-only CSS style object with fontFamily set.
<p style={inter.style}>Hello World</p>
Use variable to expose the font as a CSS custom property, then reference it in external stylesheets.
app/page.js
import { Inter } from 'next/font/google'
import styles from './component.module.css'

const inter = Inter({ variable: '--font-inter' })

export default function Page() {
  return (
    <main className={inter.variable}>
      <p className={styles.text}>Hello World</p>
    </main>
  )
}
styles/component.module.css
.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}

​
Examples

​
Google Fonts

Import variable fonts by name. No weight is needed for variable fonts.
app/layout.js
import { Inter } from 'next/font/google'

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

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  )
}
For non-variable fonts, specify a weight:
app/layout.js
import { Roboto } from 'next/font/google'

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
  display: 'swap',
})
Multiple weights and styles: 
const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})
Use an underscore for font names with multiple words. Example: Roboto Mono → import as Roboto_Mono.

​
Local fonts

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

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

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}
For a font family with multiple files: 
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' },
  ],
})

​
Multiple fonts

Create a shared font definitions file to avoid duplicate instances:
app/fonts.ts
import { Inter, Roboto_Mono } from 'next/font/google'

export const inter = Inter({ subsets: ['latin'], display: 'swap' })
export const roboto_mono = Roboto_Mono({ subsets: ['latin'], display: 'swap' })
app/layout.js
import { inter } from './fonts'

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

​
Tailwind CSS

Use the variable option to expose fonts as CSS custom properties, then reference them in your Tailwind config.
app/layout.js
import { Inter, Roboto_Mono } from 'next/font/google'

const inter = Inter({ subsets: ['latin'], display: 'swap', variable: '--font-inter' })
const roboto_mono = Roboto_Mono({ subsets: ['latin'], display: 'swap', variable: '--font-roboto-mono' })

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable} antialiased`}>
      <body>{children}</body>
    </html>
  )
}
global.css
@import 'tailwindcss';

@theme inline {
  --font-sans: var(--font-inter);
  --font-mono: var(--font-roboto-mono);
}

​
Version history

VersionChanges
v13.2.0@next/font renamed to next/font
v13.0.0@next/font introduced

Build docs developers (and LLMs) love

Get started for freeTalk to us