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