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.
69 lines
1.6 KiB
JavaScript
69 lines
1.6 KiB
JavaScript
import { Fira_Code, Roboto } from 'next/font/google'
|
|
import localFont from 'next/font/local'
|
|
|
|
const firaCode = Fira_Code({ variable: '--fira-code', subsets: ['latin'] })
|
|
const roboto = Roboto({
|
|
weight: '100',
|
|
style: 'italic',
|
|
display: 'swap',
|
|
preload: true,
|
|
variable: '--roboto-100-italic',
|
|
subsets: ['latin'],
|
|
})
|
|
const myFont = localFont({
|
|
src: '../fonts/my-font.woff2',
|
|
preload: false,
|
|
variable: '--my-font',
|
|
})
|
|
|
|
export default function WithFonts() {
|
|
return (
|
|
<>
|
|
{/* Fira Code Variable */}
|
|
<div
|
|
id="variables-fira-code"
|
|
className={firaCode.variable}
|
|
style={{ fontFamily: 'var(--fira-code)' }}
|
|
>
|
|
With variables
|
|
</div>
|
|
<div
|
|
id="without-variables-fira-code"
|
|
style={{ fontFamily: 'var(--fira-code)' }}
|
|
>
|
|
Without variables
|
|
</div>
|
|
|
|
{/* Roboto 100 Italic */}
|
|
<div
|
|
id="variables-roboto-100-italic"
|
|
className={roboto.variable}
|
|
style={{ fontFamily: 'var(--roboto-100-italic)' }}
|
|
>
|
|
With variables
|
|
</div>
|
|
<div
|
|
id="without-variables-roboto-100-italic"
|
|
style={{ fontFamily: 'var(--roboto-100-italic)' }}
|
|
>
|
|
Without variables
|
|
</div>
|
|
|
|
{/* Local font */}
|
|
<div
|
|
id="variables-local-font"
|
|
className={myFont.variable}
|
|
style={{ fontFamily: 'var(--my-font)' }}
|
|
>
|
|
With variables
|
|
</div>
|
|
<div
|
|
id="without-variables-local-font"
|
|
style={{ fontFamily: 'var(--my-font)' }}
|
|
>
|
|
Without variables
|
|
</div>
|
|
</>
|
|
)
|
|
}
|