Add explanation about font-display

docs/basic-features/font-optimization.md

@@ -22,6 +22,12 @@ To get started, install `@next/font`:
 npm install @next/font
 ```
 
+### Choosing font-display
+
+[`font-display`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display) lets you to control how your font is displayed while it's loading. `@next/font` uses `font-display: optional` by default. With `font-display: optional` the custom font is only used if it is available within 100ms, otherwise the browser will use the fallback font. This means the font will not always render on the first page visit before it's cached. It's the most performant option because it makes text rendering independent of network speed.
+
+If you're ok with sacrificing some performance to always use the custom font, it's recommended to [use `font-display: swap`](/docs/api-reference/next/font.md#display). With `font-display: swap` the browser will render the fallback font until the custom font is loaded, which is then swapped in. `@next/font` automatically generates a fallback font for you to reduce layout shifts.
+
 ### Google Fonts
 
 Automatically self-host any Google Font. Fonts are included in the deployment and served from the same domain as your deployment. **No requests are sent to Google by the browser.**