Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add explanation about font-display
Browse files Browse the repository at this point in the history
Hannes Bornö committed Dec 13, 2022

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 04c2509 commit 461f5f7
Showing 1 changed file with 6 additions and 0 deletions.
6 changes: 6 additions & 0 deletions docs/basic-features/font-optimization.md
Original file line number Diff line number Diff line change
@@ -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.**

0 comments on commit 461f5f7

Please sign in to comment.