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 3 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 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.
ijjk marked this conversation as resolved.
Show resolved Hide resolved

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