rsnext/errors/google-fonts-missing-subsets.md

46 lines
955 B
Markdown
Raw Normal View 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
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-06 00:51:38 +01:00
##### Specify which subsets to preload for that font.
- On a font per font basis by adding it to the function call
```js
const inter = Inter({ subsets: ['latin'] })
```
- Globally for all your fonts
```js
// 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.
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-06 00:51:38 +01:00
##### 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
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-06 00:51:38 +01:00
[Specifying a subset](https://nextjs.org/docs/basic-features/font-optimization#specifying-a-subset)