Correctly handle @next/font/google fonts without any preloadable subsets (#44809)
This commit is contained in:
parent
0b36a526c7
commit
a0b45c3301
4 changed files with 56 additions and 12 deletions
|
@ -29,6 +29,8 @@ export function validateData(
|
|||
weight,
|
||||
style,
|
||||
preload = true,
|
||||
// If preload is disabled set display to 'swap' by default.
|
||||
// If display is 'optional' and we don't preload, we will never fetch the font in time to display it, not even in dev.
|
||||
display = preload ? 'optional' : 'swap',
|
||||
axes,
|
||||
fallback,
|
||||
|
@ -48,22 +50,27 @@ export function validateData(
|
|||
nextFontError(`Unknown font \`${fontFamily}\``)
|
||||
}
|
||||
|
||||
if (preload && !callSubsets && !config?.subsets) {
|
||||
nextFontError(
|
||||
`Missing selected subsets for font \`${fontFamily}\`. Please specify subsets in the function call or in your \`next.config.js\`. Read more: https://nextjs.org/docs/messages/google-fonts-missing-subsets`
|
||||
)
|
||||
}
|
||||
|
||||
const availableSubsets = fontFamilyData.subsets
|
||||
subsets.forEach((subset: string) => {
|
||||
if (!availableSubsets.includes(subset)) {
|
||||
if (availableSubsets.length === 0) {
|
||||
// If the font doesn't have any preloaded subsets, disable preload and set display to 'swap'
|
||||
preload = false
|
||||
display = 'swap'
|
||||
} else {
|
||||
if (preload && !callSubsets && !config?.subsets) {
|
||||
nextFontError(
|
||||
`Unknown subset \`${subset}\` for font \`${fontFamily}\`.\nAvailable subsets: ${formatValues(
|
||||
availableSubsets
|
||||
)}`
|
||||
`Missing selected subsets for font \`${fontFamily}\`. Please specify subsets in the function call or in your \`next.config.js\`. Read more: https://nextjs.org/docs/messages/google-fonts-missing-subsets`
|
||||
)
|
||||
}
|
||||
})
|
||||
subsets.forEach((subset: string) => {
|
||||
if (!availableSubsets.includes(subset)) {
|
||||
nextFontError(
|
||||
`Unknown subset \`${subset}\` for font \`${fontFamily}\`.\nAvailable subsets: ${formatValues(
|
||||
availableSubsets
|
||||
)}`
|
||||
)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const fontWeights = fontFamilyData.weights
|
||||
const fontStyles = fontFamilyData.styles
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
import { Single_Day } from '@next/font/google'
|
||||
|
||||
const singleDay = Single_Day({ weight: '400' })
|
||||
|
||||
export default function FontWithoutPreloadableSubsets() {
|
||||
return <p className={singleDay.className}>{JSON.stringify(singleDay)}</p>
|
||||
}
|
|
@ -988,4 +988,13 @@ body {
|
|||
--google-font-color-nabla:colrv1;
|
||||
}
|
||||
`,
|
||||
'https://fonts.googleapis.com/css2?family=Single+Day:wght@400&display=swap': `
|
||||
@font-face {
|
||||
font-family: 'Single Day';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url(https://fonts.gstatic.com/s/singleday/v15/LYjHdGDjlEgoAcF95EI5jV8FVtffGoa4-V3jzT3lMfZhY8uIhf9daTM.0.woff2) format('woff2');
|
||||
}
|
||||
`,
|
||||
}
|
||||
|
|
|
@ -384,6 +384,27 @@ describe('@next/font/google', () => {
|
|||
'/_next/static/media/fb68b4558e2a718e.p.woff2',
|
||||
])
|
||||
})
|
||||
|
||||
test('font without preloadable subsets', async () => {
|
||||
const html = await renderViaHTTP(
|
||||
next.url,
|
||||
'/font-without-preloadable-subsets'
|
||||
)
|
||||
const $ = cheerio.load(html)
|
||||
|
||||
// Preconnect
|
||||
expect($('link[rel="preconnect"]').length).toBe(0)
|
||||
|
||||
// From _app
|
||||
expect($('link[as="font"]').length).toBe(1)
|
||||
expect($('link[as="font"]').get(0).attribs).toEqual({
|
||||
as: 'font',
|
||||
crossorigin: 'anonymous',
|
||||
href: '/_next/static/media/0812efcfaefec5ea.p.woff2',
|
||||
rel: 'preload',
|
||||
type: 'font/woff2',
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('Fallback fontfaces', () => {
|
||||
|
|
Loading…
Reference in a new issue