Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove page-specific font example from docs #34694

Merged
merged 1 commit into from Feb 22, 2022
Merged

Remove page-specific font example from docs #34694

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
26 changes: 3 additions & 23 deletions docs/basic-features/font-optimization.md
View file
Open in desktop
Expand Up @@ -23,29 +23,7 @@ By default, Next.js will automatically inline font CSS at build time, eliminatin

## Usage

To add a web font to your Next.js application, override `next/head`. For example, you can add a font to a specific page:

```js
// pages/index.js

import Head from 'next/head'

export default function IndexPage() {
return (
<div>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
</Head>
<p>Hello world!</p>
</div>
)
}
```

or to your entire application with a [Custom `Document`](/docs/advanced-features/custom-document.md).
To add a web font to your Next.js application, add the font to a [Custom `Document`](/docs/advanced-features/custom-document.md).

```js
// pages/_document.js
Expand Down Expand Up @@ -74,6 +52,8 @@ class MyDocument extends Document {
export default MyDocument
```

Note that we don't recommend adding fonts with `next/head`, as this only applies the font to the particular page and won't work with a streaming architecture.

Automatic Webfont Optimization currently supports Google Fonts and Typekit with support for other font providers coming soon. We're also planning to add control over [loading strategies](https://github.com/vercel/next.js/issues/21555) and `font-display` values.

See [Google Font Display](https://nextjs.org/docs/messages/google-font-display) for more information.
Expand Down