docs: Add explanation about font-display #44001
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
hanneslund
force-pushed
the
font-display-font-docs
branch
from
461f5f7 to
9041fe6
Compare
|
Ping @leerob |
hanneslund
requested review from
timneutkens,
ijjk,
shuding,
styfle,
huozhi,
padmaia,
leerob and
balazsorban44
as code owners
ijjk
reviewed
Dec 16, 2022
ijjk
approved these changes
Dec 16, 2022
leerob
reviewed
Dec 17, 2022
| @@ -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 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. | |||
There was a problem hiding this comment.
"might not be shown on slower networks unless it's cached."
I don't understand how caching affects the first display of the font. If the network is slow, and it takes longer than 100ms, it doesn't matter if it's cached - right?
Or is this trying to say that on the next visit it would be shown since it is now cached in the user's browser from the first session?
There was a problem hiding this comment.
Or is this trying to say that on the next visit it would be shown since it is now cached in the user's browser from the first session?
Yeah, this. Unless it's in cache.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add explanation and recommendation of
font-display.Bug
fixes #numbercontributing.mdFeature
fixes #numbercontributing.mdDocumentation / Examples
pnpm build && pnpm lint