Update subset validation in @next/font/google and fix CJK bug (#44594 )

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)

2023-01-05 15:51:38 -08:00

955 B

Raw Blame History

Missing specified subset for a `@next/font/google` font

Why This Error Occurred

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.

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

const inter = Inter({ subsets: ['latin'] })

Globally for all your fonts

// next.config.js
module.exports = {
  experimental: {
    fontLoaders: [
      { loader: '@next/font/google', options: { subsets: ['latin'] } },
    ],
  },
}

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.

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

Useful Links

Specifying a subset

955 B Raw Blame History

Missing specified subset for a @next/font/google font