Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: Add explanation about font-display #44001

Merged
merged 5 commits into from Dec 16, 2022
Merged

docs: Add explanation about font-display #44001

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9041fe6
Add explanation about font-display
Dec 13, 2022
91b0970
Remove double word
Dec 13, 2022
034f79f
Merge branch 'canary' into font-display-font-docs
hanneslund Dec 14, 2022
7d5abcf
Apply suggestions from code review
ijjk Dec 16, 2022
6ceb381
Merge branch 'canary' into font-display-font-docs
ijjk Dec 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/basic-features/font-optimization.md
View file
Open in desktop
Expand Up @@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"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?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.


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

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.**
Expand Down