mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +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.
39 lines
1003 B
JavaScript
39 lines
1003 B
JavaScript
import localFont from 'next/font/local'
|
|
import { Open_Sans } from 'next/font/google'
|
|
const openSans = Open_Sans({
|
|
fallback: ['system-ui', 'Arial'],
|
|
variable: '--open-sans',
|
|
adjustFontFallback: false,
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
const myFont = localFont({
|
|
fallback: ['system-ui', 'Arial'],
|
|
src: '../fonts/my-font.woff2',
|
|
adjustFontFallback: false,
|
|
subsets: ['latin'],
|
|
})
|
|
|
|
export default function WithFonts() {
|
|
return (
|
|
<>
|
|
<div id="with-fallback-fonts-classname" className={openSans.className}>
|
|
{JSON.stringify(openSans)}
|
|
</div>
|
|
<div id="with-fallback-fonts-style" style={openSans.style}>
|
|
{JSON.stringify(openSans)}
|
|
</div>
|
|
<div
|
|
id="with-fallback-fonts-variable"
|
|
style={{ fontFamily: 'var(--open-sans)' }}
|
|
className={openSans.variable}
|
|
>
|
|
{JSON.stringify(openSans)}
|
|
</div>
|
|
<div id="with-fallback-local" className={myFont.className}>
|
|
{JSON.stringify(myFont)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|