Next.js 16+ · Module

next/font/google

next/font/google provides build-time Google Font loaders for Next.js. Fonts are optimized, self-hosted with the deployment, and applied through the loader result.

How it works

Import a supported Google font from next/font/google and invoke it with loader options such as subsets. Next.js downloads the font and CSS during the build, self-hosts them with the deployment, and exposes generated styling through the returned object, commonly applied with className.

Syntax

import { FontName } from 'next/font/google'
const font = FontName(options)

Parameters

Name	Type	Description
`options`	`Font-specific loader options`	Options passed to the selected Google font loader, such as `subsets` and other font-loading settings.

Returns

A font result object containing generated styling, commonly used through its className property.

Key points

Each supported Google family is consumed through a named import and function call rather than a stylesheet link.
Font resources are prepared during the build and packaged with the application’s static assets.
The font system includes self-hosting as a built-in capability instead of requiring separate asset hosting.
The loader is intended to make font loading avoid visible layout movement.
The Google loader supports the available Google Fonts through the module’s font-specific exports.

Common mistakes

The browser does not fetch the font from Google at runtime; the assets are self-hosted by the application.
Prefer a variable font when the selected family provides one, because the documentation recommends it for performance and flexibility.

Example: Apply a self-hosted Google font in the root layout

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

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

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

Imports a Google font loader, configures a subset, and applies the generated class to the root HTML element.

When to use it

Global application typography

Set the primary typeface for an entire App Router application from the root layout.

Privacy-conscious font delivery

Use a selected Google Font subset while avoiding runtime requests to Google.

Scoped component typography

Apply a font to a specific component or page using the generated class.

Interview questions

QHow is a Google font used with next/font/google?

Import a font function from next/font/google, call it with configuration, and apply the returned className to an element. Next.js downloads the font and CSS during the build and serves them with the application.

Follow-up: Why does this avoid a browser request to Google? The font files are self-hosted as part of the deployment, so the browser loads them from the application’s origin.

QWhat benefits does the module provide?

The loader performs automatic optimization and self-hosting, while the generated styles help prevent layout shift. The module is designed to remove external font-network requests from the user’s page load.

Follow-up: What is the build-time implication? CSS and font files must be available when the application builds so they can be included among the static assets.

QHow would you apply the font throughout an App Router application?

A font loader is imported as a named export, invoked with options such as subsets, and its returned object supplies the styling used by the component tree. Applying the class at the root layout makes the choice available across the application.

Follow-up: Where is a broad application-wide font commonly applied? In an App Router project, the root layout’s HTML or body element is the natural scope.

next/font
next/font/local
Font Module

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