5f2c9d0b30
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)
102 lines
2.8 KiB
JavaScript
102 lines
2.8 KiB
JavaScript
const fs = require('fs/promises')
|
|
const path = require('path')
|
|
const fetch = require('node-fetch')
|
|
|
|
;(async () => {
|
|
const { familyMetadataList } = await fetch(
|
|
'https://fonts.google.com/metadata/fonts'
|
|
).then((r) => r.json())
|
|
|
|
let fontFunctions = `/**
|
|
* This is an autogenerated file by scripts/update-google-fonts.js
|
|
*/
|
|
import type { CssVariable, NextFont, NextFontWithVariable, Display } from '../types'
|
|
`
|
|
const fontData = {}
|
|
const ignoredSubsets = [
|
|
'menu',
|
|
'japanese',
|
|
'korean',
|
|
'chinese-simplified',
|
|
'chinese-hongkong',
|
|
'chinese-traditional',
|
|
]
|
|
for (let { family, fonts, axes, subsets } of familyMetadataList) {
|
|
subsets = subsets.filter((subset) => !ignoredSubsets.includes(subset))
|
|
const hasPreloadableSubsets = subsets.length > 0
|
|
const weights = new Set()
|
|
const styles = new Set()
|
|
|
|
for (const variant of Object.keys(fonts)) {
|
|
if (variant.endsWith('i')) {
|
|
styles.add('italic')
|
|
weights.add(variant.slice(0, -1))
|
|
continue
|
|
} else {
|
|
styles.add('normal')
|
|
weights.add(variant)
|
|
}
|
|
}
|
|
|
|
const hasVariableFont = axes.length > 0
|
|
|
|
let optionalAxes
|
|
if (hasVariableFont) {
|
|
weights.add('variable')
|
|
|
|
const nonWeightAxes = axes.filter(({ tag }) => tag !== 'wght')
|
|
if (nonWeightAxes.length > 0) {
|
|
optionalAxes = nonWeightAxes
|
|
}
|
|
}
|
|
|
|
fontData[family] = {
|
|
weights: [...weights],
|
|
styles: [...styles],
|
|
axes: hasVariableFont ? axes : undefined,
|
|
subsets,
|
|
}
|
|
const optionalIfVariableFont = hasVariableFont ? '?' : ''
|
|
|
|
const formatUnion = (values) =>
|
|
values.map((value) => `"${value}"`).join('|')
|
|
|
|
const weightTypes = [...weights]
|
|
const styleTypes = [...styles]
|
|
|
|
fontFunctions += `export declare function ${family.replaceAll(
|
|
' ',
|
|
'_'
|
|
)}<T extends CssVariable | undefined = undefined>(options${optionalIfVariableFont}: {
|
|
weight${optionalIfVariableFont}:${formatUnion(
|
|
weightTypes
|
|
)} | Array<${formatUnion(
|
|
weightTypes.filter((weight) => weight !== 'variable')
|
|
)}>
|
|
style?: ${formatUnion(styleTypes)} | Array<${formatUnion(styleTypes)}>
|
|
display?:Display
|
|
variable?: T
|
|
${hasPreloadableSubsets ? 'preload?:boolean' : ''}
|
|
fallback?: string[]
|
|
adjustFontFallback?: boolean
|
|
${hasPreloadableSubsets ? `subsets?: Array<${formatUnion(subsets)}>` : ''}
|
|
${
|
|
optionalAxes
|
|
? `axes?:(${formatUnion(optionalAxes.map(({ tag }) => tag))})[]`
|
|
: ''
|
|
}
|
|
}): T extends undefined ? NextFont : NextFontWithVariable
|
|
`
|
|
}
|
|
|
|
await Promise.all([
|
|
fs.writeFile(
|
|
path.join(__dirname, '../packages/font/src/google/index.ts'),
|
|
fontFunctions
|
|
),
|
|
fs.writeFile(
|
|
path.join(__dirname, '../packages/font/src/google/font-data.json'),
|
|
JSON.stringify(fontData, null, 2)
|
|
),
|
|
])
|
|
})()
|