mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Hannes BornöandGitHub
cb729c1087
Currently there's an experimental option in `next.config.js` that lets you define default subset(s) to preload for all your fonts. [docs](https://nextjs.org/docs/basic-features/font-optimization#specifying-a-subset) Over time we haven't seen much use of this option, and we are defining the subsets in the font function call in all our examples/docs. Imo it would be fine to drop this option. This PR removes that experimental option. If you happen to use it you'll get a build error with [a link](https://github.com/vercel/next.js/blob/f67af163cd625ad7a2d6141edd2b8e2679e14996/errors/google-fonts-missing-subsets.md). Next step (breaking change for next major) would probably be to remove the preload and subsets properties from `next/font/google` calls, and just have something like [`preloadSubsets´](https://vercel.slack.com/archives/C8EAN8A94/p1674868993169559?thread_ts=1674707555.461809&cid=C8EAN8A94) that is required.
50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
import { Fraunces, Indie_Flower, Roboto } from 'next/font/google'
|
|
|
|
const indieFlower = Indie_Flower({
|
|
weight: '400',
|
|
preload: false,
|
|
subsets: ['latin'],
|
|
})
|
|
const fraunces = Fraunces({ weight: '400', preload: false, subsets: ['latin'] })
|
|
|
|
const robotoMultiple = Roboto({
|
|
weight: ['900', '100'],
|
|
style: ['normal', 'italic'],
|
|
subsets: ['latin'],
|
|
})
|
|
const frauncesMultiple = Fraunces({
|
|
style: ['italic', 'normal'],
|
|
axes: ['SOFT', 'WONK', 'opsz'],
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
const frauncesMultipleWeights = Fraunces({
|
|
weight: ['100', '400', '900'],
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function WithFonts() {
|
|
return (
|
|
<>
|
|
<div id="first-google-font" className={indieFlower.className}>
|
|
{JSON.stringify(indieFlower)}
|
|
</div>
|
|
<div id="second-google-font" className={fraunces.className}>
|
|
{JSON.stringify(fraunces)}
|
|
</div>
|
|
<div id="multiple-roboto" className={robotoMultiple.className}>
|
|
{JSON.stringify(robotoMultiple)}
|
|
</div>
|
|
<div id="multiple-fraunces" className={frauncesMultiple.className}>
|
|
{JSON.stringify(frauncesMultiple)}
|
|
</div>
|
|
<div
|
|
id="multiple-weights-fraunces"
|
|
className={frauncesMultipleWeights.className}
|
|
>
|
|
{JSON.stringify(frauncesMultipleWeights)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|