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

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`
vercel · Feb 22, 2022 · b3f2b38 · b3f2b38
1 parent 037f79d
commit b3f2b38
Showing 1 changed file with 3 additions and 23 deletions.
diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md
@@ -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.