From 9041fe682912a13d3cf7a01b4231f2832518788e 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 1/3] 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 f0db4c0c72f8..ad22c4cd5600 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. When your intended font used by `@next/font` does not load within 100ms, the auto generated fallback font will be displayed in the browser. While it is automatically generated to be as visually similar to the intended font as possible, reducing layout shift, it does come with the tradeoff that your intended font might not be shown on slower networks unless it's cached. + +If you want guarantees around your intended font always showing, and accept the tradeoff of minimal layout shift from swapping your fallback font for the primary font, you can use [use `font-display: swap`](/docs/api-reference/next/font.md#display). + ### 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.** From 91b09705119efb2c2c98f7b159cea477965054f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hannes=20Born=C3=B6?= Date: Tue, 13 Dec 2022 15:34:43 +0100 Subject: [PATCH 2/3] Remove double word --- docs/basic-features/font-optimization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index ad22c4cd5600..cda08184782b 100644 --- a/docs/basic-features/font-optimization.md +++ b/docs/basic-features/font-optimization.md @@ -26,7 +26,7 @@ npm install @next/font [`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. When your intended font used by `@next/font` does not load within 100ms, the auto generated fallback font will be displayed in the browser. While it is automatically generated to be as visually similar to the intended font as possible, reducing layout shift, it does come with the tradeoff that your intended font might not be shown on slower networks unless it's cached. -If you want guarantees around your intended font always showing, and accept the tradeoff of minimal layout shift from swapping your fallback font for the primary font, you can use [use `font-display: swap`](/docs/api-reference/next/font.md#display). +If you want guarantees around your intended font always showing, and accept the tradeoff of minimal layout shift from swapping your fallback font for the primary font, you can [use `font-display: swap`](/docs/api-reference/next/font.md#display). ### Google Fonts From 7d5abcf5a8496351e411a3ac1af89704910a4875 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Thu, 15 Dec 2022 22:52:14 -0800 Subject: [PATCH 3/3] Apply suggestions from code review --- docs/basic-features/font-optimization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/basic-features/font-optimization.md b/docs/basic-features/font-optimization.md index cda08184782b..9442be7bb646 100644 --- a/docs/basic-features/font-optimization.md +++ b/docs/basic-features/font-optimization.md @@ -24,7 +24,7 @@ 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. When your intended font used by `@next/font` does not load within 100ms, the auto generated fallback font will be displayed in the browser. While it is automatically generated to be as visually similar to the intended font as possible, reducing layout shift, it does come with the tradeoff that your intended font might not be shown on slower networks unless it's cached. +[`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. When the primary font used by `@next/font` does not load within 100ms, the auto generated fallback font will be displayed in the browser. While it is automatically generated to be as visually similar to the primary font as possible to reduce layout shift, it does come with the tradeoff that your intended font might not be shown on slower networks unless it's cached. If you want guarantees around your intended font always showing, and accept the tradeoff of minimal layout shift from swapping your fallback font for the primary font, you can [use `font-display: swap`](/docs/api-reference/next/font.md#display).