From 8fe1171d4fa73adf48d2e8b85e72af53d900bfdc Mon Sep 17 00:00:00 2001
From: KenParsons <90424167+KenAKAFrosty@users.noreply.github.com>
Date: Wed, 31 Aug 2022 14:44:46 -0400
Subject: [PATCH] [docs] functional _document in font-optimization
---
docs/basic-features/font-optimization.md | 38 +++++++++++-------------
1 file changed, 17 insertions(+), 21 deletions(-)
diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md
index 33adf56fe48c..8965d97a26a9 100644
--- a/docs/basic-features/font-optimization.md
+++ b/docs/basic-features/font-optimization.md
@@ -27,28 +27,24 @@ To add a web font to your Next.js application, add the font to a [Custom `Docume
```js
// pages/_document.js
-import Document, { Html, Head, Main, NextScript } from 'next/document'
-
-class MyDocument extends Document {
- render() {
- return (
-
-
-
-
-
-
-
-
-
- )
- }
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+ return (
+
+
+
+
+
+
+
+
+
+ )
}
-
-export default MyDocument
```
Adding fonts to `_document` is preferred over individual pages. When adding fonts to a single page with [`next/head`](/docs/api-reference/next/head.md), font optimizations included by Next.js will not work on navigations between pages client-side or when using [streaming](/docs/advanced-features/react-18/streaming.md).