From ca9fef6ef6c34ff83f52e367f45dafead7c735b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Tue, 23 Aug 2022 16:15:09 +0200 Subject: [PATCH] Docs: Updated note about using next/head in basic-features/font-optimization (#39863) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) --- docs/basic-features/font-optimization.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index bcd1498072fa..139a09b32d5d 100644 --- a/docs/basic-features/font-optimization.md +++ b/docs/basic-features/font-optimization.md @@ -53,7 +53,13 @@ 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. +Although it's possible to add fonts in a page with [`next/head`](/docs/api-reference/next/head) it comes with some drawbacks: + +- It only applies the font to that particular page. +- The font optimization will only work on page load, not on client side navigation. +- It won't work with a streaming architecture. + +Thus it's highly recommended to add the font in a [Custom `Document`](/docs/advanced-features/custom-document.md), like in the code snippet above. 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.