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)
|
|
),
|
|
])
|
|
})()
|