Next.js 16+ · Module

next/font/local

next/font/local loads local font files through Next.js's font optimization system. It self-hosts the assets and returns generated font styling values that can be applied to elements.

How it works

Import the default localFont function, provide one or more local font files through src, and apply the returned font object's generated className or variable to an element. Next.js self-hosts and optimizes the font during the build.

Syntax

import localFont from 'next/font/local'
const font = localFont({ src: './font.woff2' })

Parameters

Name	Type	Description
`src`	`string \| FontSource[]`	One font file path, or an array of font file configurations for a family.
`display`	`FontDisplay`	Controls the CSS font-display behavior.
`variable`	`string`	Optional CSS custom property name generated for the font.
`declarations`	`FontDeclarations`	Optional explicit family name and other font-face declarations.

Returns

A font object exposing generated styling values such as className, variable, and style.

Key points

Font assets are self-hosted by the application rather than delegated to a third-party font service.
Relative font paths are anchored at the module containing the localFont call.
Pass an array to src when one family needs multiple local font files.

Common mistakes

Calling localFont repeatedly creates separate hosted instances; load a shared font once and reuse its exported font object.
Use an array when a family is split across multiple files, and configure each file's weight or style when needed.

Example: Load a local font in the root layout

import localFont from 'next/font/local'

const geist = localFont({
  src: './fonts/GeistVF.woff2',
  display: 'swap',
})

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

This loads a local font and applies the generated class to the root HTML element.

When to use it

Apply a bundled brand typeface across the application

Branding

Self-host a font without external provider requests

Performance

Combine multiple files for weights or styles in one family

Typography variants

Interview questions

QWhat does next/font/local provide?

localFont is the default export from next/font/local. It accepts font configuration, including a required src, and returns a font object whose generated className can be applied to an element.

Follow-up: How should the same font be used in several places? Load it once in a shared module and import that font object wherever it is needed.

QHow are local font paths resolved?

The path in src is resolved relative to the file that calls localFont. Font files may be stored in locations such as the public folder or alongside files in the app directory.

Follow-up: What changes if the font file moves? Update the relative src path from the calling module; the path is not resolved relative to the project root.

QHow do you configure several files for one local family?

A single family can use multiple files by passing an array to src. The returned font object can then be applied through its generated CSS class or other exposed values.

Follow-up: Why might multiple files be necessary? Separate files can represent different weights or styles within the same family, allowing the browser to select the appropriate face.

next/font
next/font/google
font.className
font.variable
font.style

Source: Font Module. Checked 2026-10-15.