mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Hannes BornöandGitHub
435eca3fc5
Enables using `next/font` by adding `@next/font` as a dependency and reexporting its loaders. Always generates the `font-loader-manifest` as we can't know beforehand if the user intends to use `next/font` or not. Also adds telemetry for `next/font` usage. The tests are updated to use `next/font`. But `@next/font` is tested in `test/e2e/next-font/index.test.ts` and `test/e2e/app-dir/next-font` as well to ensure it doesn't break. Fixes NEXT-351 ## 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)
154 lines
3.1 KiB
JavaScript
154 lines
3.1 KiB
JavaScript
import localFont from 'next/font/local'
|
|
|
|
const myFont1 = localFont({
|
|
src: '../fonts/my-font.woff2',
|
|
style: 'italic',
|
|
weight: '100',
|
|
fallback: ['system-ui'],
|
|
adjustFontFallback: 'Times New Roman',
|
|
})
|
|
const myFont2 = localFont({
|
|
src: '../fonts/my-other-font.woff2',
|
|
preload: false,
|
|
variable: '--my-font',
|
|
})
|
|
|
|
const roboto = localFont({
|
|
preload: false,
|
|
src: [
|
|
{
|
|
path: '../fonts/roboto/roboto-100-italic.woff2',
|
|
weight: '100',
|
|
style: 'italic',
|
|
},
|
|
{
|
|
path: '../fonts/my-font.woff2',
|
|
weight: '100',
|
|
style: 'normal',
|
|
},
|
|
{
|
|
path: '../fonts/my-font.woff2',
|
|
weight: '400',
|
|
style: 'italic',
|
|
},
|
|
{
|
|
path: '../fonts/roboto/roboto-400.woff2',
|
|
weight: '400',
|
|
},
|
|
{
|
|
path: '../fonts/my-font.woff2',
|
|
style: 'italic',
|
|
},
|
|
{
|
|
path: '../fonts/my-font.woff2',
|
|
weight: '900',
|
|
style: 'normal',
|
|
},
|
|
],
|
|
})
|
|
|
|
const robotoVar1 = localFont({
|
|
preload: false,
|
|
src: [
|
|
{
|
|
path: '../fonts/roboto/roboto-400.woff2',
|
|
weight: '100 300',
|
|
style: 'normal',
|
|
},
|
|
{
|
|
path: '../fonts/my-font.woff2',
|
|
weight: '100 300',
|
|
style: 'italic',
|
|
},
|
|
{
|
|
path: '../fonts/my-font.woff2',
|
|
weight: '500 900',
|
|
style: 'italic',
|
|
},
|
|
{
|
|
path: '../fonts/my-font.woff2',
|
|
weight: '500 900',
|
|
style: 'normal',
|
|
},
|
|
],
|
|
})
|
|
|
|
const robotoVar2 = localFont({
|
|
preload: false,
|
|
src: [
|
|
{
|
|
path: '../fonts/roboto/roboto-900.woff2',
|
|
weight: '100 900',
|
|
style: 'italic',
|
|
},
|
|
{
|
|
path: '../fonts/roboto/roboto-400.woff2',
|
|
weight: '100 900',
|
|
style: 'normal',
|
|
},
|
|
{
|
|
path: '../fonts/my-font.woff2',
|
|
weight: '300 399',
|
|
style: 'italic',
|
|
},
|
|
{
|
|
path: '../fonts/my-font.woff2',
|
|
weight: '401 500',
|
|
style: 'normal',
|
|
},
|
|
],
|
|
})
|
|
|
|
const robotoWithPreload = localFont({
|
|
src: [
|
|
{
|
|
path: '../fonts/roboto/roboto-100.woff2',
|
|
weight: '100',
|
|
style: 'normal',
|
|
},
|
|
{
|
|
path: '../fonts/roboto/roboto-900-italic.woff2',
|
|
weight: '900',
|
|
style: 'italic',
|
|
},
|
|
{
|
|
path: '../fonts/roboto/roboto-100.woff2',
|
|
weight: '100',
|
|
style: 'normal',
|
|
},
|
|
{
|
|
path: '../fonts/roboto/roboto-100-italic.woff2',
|
|
weight: '900',
|
|
style: 'italic',
|
|
},
|
|
],
|
|
})
|
|
|
|
export default function WithFonts() {
|
|
return (
|
|
<>
|
|
<div id="first-local-font" className={myFont1.className}>
|
|
{JSON.stringify(myFont1)}
|
|
</div>
|
|
<div id="second-local-font" className={myFont2.className}>
|
|
{JSON.stringify(myFont2)}
|
|
</div>
|
|
<div id="roboto-local-font" className={roboto.className}>
|
|
{JSON.stringify(roboto)}
|
|
</div>
|
|
<div id="roboto-local-font-var1" className={robotoVar1.className}>
|
|
{JSON.stringify(robotoVar1)}
|
|
</div>
|
|
<div id="roboto-local-font-var2" className={robotoVar2.className}>
|
|
{JSON.stringify(robotoVar2)}
|
|
</div>
|
|
<div
|
|
id="roboto-local-font-preload"
|
|
className={robotoWithPreload.className}
|
|
>
|
|
{JSON.stringify(robotoWithPreload)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|