archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Remove page-specific font example from docs (#34694)

Browse source 
The Font Optimization docs have an outdated example that recommends
adding fonts via `next/head`. This is an anti-pattern that Next.js
has already warned about through ESLint for a while (see
https://nextjs.org/docs/messages/no-page-custom-font) and is now
starting to warn about through the console because it won't work
well with streaming architecture.

This change removes the outdated example from the docs.
Fixes #34693



## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`
This commit is contained in:
Kara 2022-02-22 15:17:01 -08:00 committed by GitHub
parent 037f79d51f
commit b3f2b38844
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 3 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
docs/basic-features/font-optimization.md
View file

@ -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
@ -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.