From 461f5f7a4329ed6918c989791b0f0026fe31e806 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Tue, 13 Dec 2022 14:37:41 +0100 Subject: [PATCH] Add explanation about font-display --- docs/basic-features/font-optimization.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index f0db4c0c72f8d63..7481cee83f5f8f1 100644 --- a/docs/basic-features/font-optimization.md +++ b/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.**