Skip to content

Commit

Permalink
Update subset validation in @next/font/google and fix CJK bug (#44594)
Browse files Browse the repository at this point in the history
Currently there's a bug when selecting Chinese, Japanese or Korean (CJK)
as subsets.
```js
const notoSans = Noto_Sans_JP({
  subsets: ['japanese'],
})
```
It actually doesn't work, nothing preloads. This PR solves this by
removing CJK languages as candidates for preloading. The reason is that
they contain so many glyphs that each font-family is split up in 100+
font files. It doesn't make sense to preload all of them.

So CJK users will have to disable preloading.
```js
const notoSansJapanese = Noto_Sans_JP({
  weight: '400',
  preload: false,
})
```
In case you do manually disable preloading like above, the default
`font-display` is changed to `swap`.

This PR also improves the validation errors of subsets.
1. Providing unknown subset
```
`@next/font` error:
Unknown subset `japanese` for font `Inter`.
Available subsets: `cyrillic`, `cyrillic-ext`, `greek`, `greek-ext`, `latin`, `latin-ext`, `vietnamese`
```
2. Missing specified subset. The error has a link with further
instructions.
```
`@next/font` error:
Missing selected subsets for font `Inter`. Please specify subsets in the function call or in your `next.config.js`. Read more: https://nextjs.org/docs/messages/google-fonts-missing-subsets
```

fixes NEXT-336

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ]
[e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md)

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
  • Loading branch information
hanneslund authored Jan 5, 2023
1 parent 2c49972 commit 5f2c9d0
Show file tree
Hide file tree
Showing 9 changed files with 3,558 additions and 1,593 deletions.
15 changes: 13 additions & 2 deletions errors/google-fonts-missing-subsets.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ Preload is enabled for a font that is missing a specified subset.

#### Possible Ways to Fix It

Specify which subsets to preload for that font.
##### Specify which subsets to preload for that font.

- On a font per font basis by adding it to the function call

Expand All @@ -29,6 +29,17 @@ module.exports = {

If both are configured, the subset in the function call is used.

##### Disable preloading for that font

If it's not possible to preload your intended subset you can disable preloading.

```js
const notoSansJapanese = Noto_Sans_JP({
weight: '400',
preload: false,
})
```

### Useful Links

[Specifying a subset](https://beta.nextjs.org/docs/optimizing/fonts#specifying-a-subset)
[Specifying a subset](https://nextjs.org/docs/basic-features/font-optimization#specifying-a-subset)
Loading

0 comments on commit 5f2c9d0

Please sign in to comment.