diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md
new file mode 100644
index 0000000000000..dfb91f992d116
--- /dev/null
+++ b/docs/basic-features/font-optimization.md
@@ -0,0 +1,88 @@
+---
+description: Next.js supports built-in web font optimization to inline font CSS. Learn more here.
+---
+
+# Font Optimization
+
+Since version **10.2**, Next.js has built-in web font optimization.
+
+By default, Next.js will automatically inline font CSS at build time, eliminating an extra round trip to fetch font declarations. This results in improvements to [First Contentful Paint (FCP)](https://web.dev/fcp/) and [Largest Contentful Paint (LCP)](https://vercel.com/blog/core-web-vitals#largest-contentful-paint). For example:
+
+```js
+// Before
+
+
+// After
+
+```
+
+## 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).
+
+```js
+// pages/_document.js
+
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
+
+export default MyDocument
+```
+
+Automatic Webfont Optimization currently supports Google Fonts, 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.
+
+## Related
+
+For more information on what to do next, we recommend the following sections:
+
+