61f56f997c
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
415 lines
9.3 KiB
Plaintext
415 lines
9.3 KiB
Plaintext
---
|
|
title: Font Optimization
|
|
description: Learn how to optimize fonts in Next.js
|
|
related:
|
|
title: API Reference
|
|
description: See the API Reference for the full feature set of Next.js Font
|
|
links:
|
|
- app/api-reference/components/font
|
|
---
|
|
|
|
The [`next/font`](/docs/app/api-reference/components/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. This means you can optimally load web fonts with no layout shift.
|
|
|
|
<AppOnly>
|
|
|
|
To start using `next/font`, import it from [`next/font/local`](#local-fonts) or [`next/font/google`](#google-fonts), call it as a function with the appropriate options, and set the `className` of the element you want to apply the font to. For example:
|
|
|
|
```tsx filename="app/layout.tsx" highlight={1,3-5,9} switcher
|
|
import { Geist } from 'next/font/google'
|
|
|
|
const geist = Geist({
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<html lang="en" className={geist.className}>
|
|
<body>{children}</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/layout.js" highlight={1,3-5,9} switcher
|
|
import { Geist } from 'next/font/google'
|
|
|
|
const geist = Geist({
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function Layout({ children }) {
|
|
return (
|
|
<html className={geist.className}>
|
|
<body>{children}</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
Fonts are scoped to the component they're used in. To apply a font to your entire application, add it to the [Root Layout](/docs/app/api-reference/file-conventions/layout#root-layout).
|
|
|
|
</AppOnly>
|
|
|
|
<PagesOnly>
|
|
|
|
To start using `next/font`, import it from [`next/font/local`](#local-fonts) or [`next/font/google`](#google-fonts), call it as a function with the appropriate options, and set the `className` of the element you want to apply the font to. For example, you can apply fonts globally in your [Custom App](/docs/pages/building-your-application/routing/custom-app) (`pages/_app`):
|
|
|
|
```tsx filename="pages/_app.tsx" highlight={1,4-6,10} switcher
|
|
import { Geist } from 'next/font/google'
|
|
import type { AppProps } from 'next/app'
|
|
|
|
const geist = Geist({
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function MyApp({ Component, pageProps }: AppProps) {
|
|
return (
|
|
<main className={geist.className}>
|
|
<Component {...pageProps} />
|
|
</main>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="pages/_app.js" highlight={1,3-5,9} switcher
|
|
import { Geist } from 'next/font/google'
|
|
|
|
const geist = Geist({
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function MyApp({ Component, pageProps }) {
|
|
return (
|
|
<main className={geist.className}>
|
|
<Component {...pageProps} />
|
|
</main>
|
|
)
|
|
}
|
|
```
|
|
|
|
If you want to apply the font to the `<html>` element, you can use a [Custom Document](/docs/pages/building-your-application/routing/custom-document) (`pages/_document`):
|
|
|
|
```tsx filename="pages/_document.tsx" highlight={2,4-6,10} switcher
|
|
import { Html, Head, Main, NextScript } from 'next/document'
|
|
import { Geist } from 'next/font/google'
|
|
|
|
const geist = Geist({
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function Document() {
|
|
return (
|
|
<Html lang="en" className={geist.className}>
|
|
<Head />
|
|
<body>
|
|
<Main />
|
|
<NextScript />
|
|
</body>
|
|
</Html>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="pages/_document.js" highlight={2,4-6,10} switcher
|
|
import { Html, Head, Main, NextScript } from 'next/document'
|
|
import { Geist } from 'next/font/google'
|
|
|
|
const geist = Geist({
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function Document() {
|
|
return (
|
|
<Html lang="en" className={geist.className}>
|
|
<Head />
|
|
<body>
|
|
<Main />
|
|
<NextScript />
|
|
</body>
|
|
</Html>
|
|
)
|
|
}
|
|
```
|
|
|
|
</PagesOnly>
|
|
|
|
## Google fonts
|
|
|
|
You can automatically self-host any Google Font. Fonts are included stored as static assets and served from the same domain as your deployment, meaning no requests are sent to Google by the browser when the user visits your site.
|
|
|
|
To start using a Google Font, import your chosen font from `next/font/google`:
|
|
|
|
<AppOnly>
|
|
|
|
```tsx filename="app/layout.tsx" switcher
|
|
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>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/layout.js" switcher
|
|
import { Geist } from 'next/font/google'
|
|
|
|
const geist = Geist({
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function RootLayout({ children }) {
|
|
return (
|
|
<html lang="en" className={geist.className}>
|
|
<body>{children}</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
</AppOnly>
|
|
|
|
<PagesOnly>
|
|
|
|
```tsx filename="pages/_app.tsx" switcher
|
|
import { Geist } from 'next/font/google'
|
|
import type { AppProps } from 'next/app'
|
|
|
|
const geist = Geist({
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function MyApp({ Component, pageProps }: AppProps) {
|
|
return (
|
|
<main className={geist.className}>
|
|
<Component {...pageProps} />
|
|
</main>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="pages/_app.js" switcher
|
|
import { Geist } from 'next/font/google'
|
|
|
|
const geist = Geist({
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function MyApp({ Component, pageProps }) {
|
|
return (
|
|
<main className={geist.className}>
|
|
<Component {...pageProps} />
|
|
</main>
|
|
)
|
|
}
|
|
```
|
|
|
|
</PagesOnly>
|
|
|
|
We recommend using [variable fonts](https://fonts.google.com/variablefonts) for the best performance and flexibility. But if you can't use a variable font, you will need to specify a weight:
|
|
|
|
<AppOnly>
|
|
|
|
```tsx filename="app/layout.tsx" highlight={4} switcher
|
|
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>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/layout.js" highlight={4} switcher
|
|
import { Roboto } from 'next/font/google'
|
|
|
|
const roboto = Roboto({
|
|
weight: '400',
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function RootLayout({ children }) {
|
|
return (
|
|
<html lang="en" className={roboto.className}>
|
|
<body>{children}</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
</AppOnly>
|
|
|
|
<PagesOnly>
|
|
|
|
```tsx filename="pages/_app.tsx" highlight={5} switcher
|
|
import { Roboto } from 'next/font/google'
|
|
import type { AppProps } from 'next/app'
|
|
|
|
const roboto = Roboto({
|
|
weight: '400',
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function MyApp({ Component, pageProps }: AppProps) {
|
|
return (
|
|
<main className={roboto.className}>
|
|
<Component {...pageProps} />
|
|
</main>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="pages/_app.js" highlight={4} switcher
|
|
import { Roboto } from 'next/font/google'
|
|
|
|
const roboto = Roboto({
|
|
weight: '400',
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function MyApp({ Component, pageProps }) {
|
|
return (
|
|
<main className={roboto.className}>
|
|
<Component {...pageProps} />
|
|
</main>
|
|
)
|
|
}
|
|
```
|
|
|
|
</PagesOnly>
|
|
|
|
## Local fonts
|
|
|
|
<AppOnly>
|
|
|
|
To use a local font, import your font from `next/font/local` and specify the [`src`](/docs/app/api-reference/components/font#src) of your local font file. Fonts can be stored in the [`public`](/docs/app/api-reference/file-conventions/public-folder) folder or co-located inside the `app` folder. For example:
|
|
|
|
```tsx filename="app/layout.tsx" switcher
|
|
import localFont from 'next/font/local'
|
|
|
|
const myFont = localFont({
|
|
src: './my-font.woff2',
|
|
})
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode
|
|
}) {
|
|
return (
|
|
<html lang="en" className={myFont.className}>
|
|
<body>{children}</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/layout.js" switcher
|
|
import localFont from 'next/font/local'
|
|
|
|
const myFont = localFont({
|
|
src: './my-font.woff2',
|
|
})
|
|
|
|
export default function RootLayout({ children }) {
|
|
return (
|
|
<html lang="en" className={myFont.className}>
|
|
<body>{children}</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
</AppOnly>
|
|
|
|
<PagesOnly>
|
|
|
|
To use a local font, import your font from `next/font/local` and specify the [`src`](/docs/pages/api-reference/components/font#src) of your local font file. Fonts can be stored in the [`public`](/docs/pages/api-reference/file-conventions/public-folder) folder or inside the `pages` folder. For example:
|
|
|
|
```tsx filename="pages/_app.tsx" switcher
|
|
import localFont from 'next/font/local'
|
|
import type { AppProps } from 'next/app'
|
|
|
|
const myFont = localFont({
|
|
src: './my-font.woff2',
|
|
})
|
|
|
|
export default function MyApp({ Component, pageProps }: AppProps) {
|
|
return (
|
|
<main className={myFont.className}>
|
|
<Component {...pageProps} />
|
|
</main>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="pages/_app.js" switcher
|
|
import localFont from 'next/font/local'
|
|
|
|
const myFont = localFont({
|
|
src: './my-font.woff2',
|
|
})
|
|
|
|
export default function MyApp({ Component, pageProps }) {
|
|
return (
|
|
<main className={myFont.className}>
|
|
<Component {...pageProps} />
|
|
</main>
|
|
)
|
|
}
|
|
```
|
|
|
|
</PagesOnly>
|
|
|
|
If you want to use multiple files for a single font family, `src` can be an array:
|
|
|
|
```js
|
|
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',
|
|
},
|
|
],
|
|
})
|
|
```
|