> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/vercel/next.js/llms.txt
> Use this file to discover all available pages before exploring further.
# Font
> Optimize web font loading with next/font, which self-hosts fonts at build time and eliminates external network requests for improved privacy and performance.
`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.
```jsx app/layout.js theme={null}
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
})
export default function RootLayout({ children }) {
return (
{children}
)
}
```
```jsx app/layout.js theme={null}
import localFont from 'next/font/local'
const myFont = localFont({
src: './my-font.woff2',
display: 'swap',
})
export default function RootLayout({ children }) {
return (
{children}
)
}
```
## Options
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:
```js theme={null}
src: [
{ path: './Roboto-Regular.woff2', weight: '400', style: 'normal' },
{ path: './Roboto-Bold.woff2', weight: '700', style: 'normal' },
]
```
**Required** for `next/font/local`.
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.
The font style. Defaults to `'normal'`. Accepts:
* A string: `'italic'` or `'normal'`
* An array for multiple styles (Google fonts only): `['italic', 'normal']`
Subsets to preload, defined as an array of string names. Used in `next/font/google` only.
```js theme={null}
subsets: ['latin']
```
When `preload` is `true` (the default), a `` tag is injected for each specified subset.
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.
```js theme={null}
axes: ['slnt'] // for Inter variable font
```
Used in `next/font/google` only.
The CSS `font-display` value. Accepts `'auto'`, `'block'`, `'swap'`, `'fallback'`, or `'optional'`.
Whether to preload the font. When `true`, a `` 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 fonts to use if the primary font cannot be loaded.
```js theme={null}
fallback: ['system-ui', 'arial']
```
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`
The CSS custom property name for use with the CSS variable method.
```js theme={null}
variable: '--font-inter'
```
Exposes the font as `var(--font-inter)` in CSS.
Additional `@font-face` descriptor key-value pairs. Used in `next/font/local` only.
```js theme={null}
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.
```jsx theme={null}
Hello, Next.js!
```
A read-only CSS style object with `fontFamily` set.
```jsx theme={null}
Hello World
```
Use `variable` to expose the font as a CSS custom property, then reference it in external stylesheets.
```jsx app/page.js theme={null}
import { Inter } from 'next/font/google'
import styles from './component.module.css'
const inter = Inter({ variable: '--font-inter' })
export default function Page() {
return (
Hello World
)
}
```
```css styles/component.module.css theme={null}
.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.
```jsx app/layout.js theme={null}
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
})
export default function RootLayout({ children }) {
return (
{children}
)
}
```
For non-variable fonts, specify a weight:
```jsx app/layout.js theme={null}
import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
display: 'swap',
})
```
Multiple weights and styles:
```jsx theme={null}
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
```jsx app/layout.js theme={null}
import localFont from 'next/font/local'
const myFont = localFont({
src: './my-font.woff2',
display: 'swap',
})
export default function RootLayout({ children }) {
return (
{children}
)
}
```
For a font family with multiple files:
```js theme={null}
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:
```ts app/fonts.ts theme={null}
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' })
```
```jsx app/layout.js theme={null}
import { inter } from './fonts'
export default function Layout({ children }) {
return (
{children}
)
}
```
### Tailwind CSS
Use the `variable` option to expose fonts as CSS custom properties, then reference them in your Tailwind config.
```jsx app/layout.js theme={null}
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 (
{children}
)
}
```
```css global.css theme={null}
@import 'tailwindcss';
@theme inline {
--font-sans: var(--font-inter);
--font-mono: var(--font-roboto-mono);
}
```
## Version history
| Version | Changes |
| --------- | ----------------------------------- |
| `v13.2.0` | `@next/font` renamed to `next/font` |
| `v13.0.0` | `@next/font` introduced |