diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index a36b731b29b4..217267338e5a 100644 --- 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 ( -
- - - -

Hello world!

-
- ) -} -``` - -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.