bf8ee1edb4
For some context: [https://vercel.slack.com/archives/CGU8HUTUH/p1662124179102509](https://vercel.slack.com/archives/CGU8HUTUH/p1662124179102509) Continuation of #40221 and #40227 Adds `experimental.fontLoaders`. SWC next-font-loaders (#40221) transforms font loader (e.g. #40227) call expressions into an import with the function call arguments as a query. The imports will be matched by `next-font-loader`. It runs the configured font loaders - emits font files and returns CSS. Exports are added, and the font-family is made locally scoped. The returned CSS is turned into a CSS module with `css-loader` which lets you consume the font-family. `FontLoaderManifestPlugin` creates a manifest of the preloaded font files for each entrypoint. Preload/preconnect are then added in `_document.tsx` if any font files were found for that path. Co-authored-by: JJ Kasper <jj@jjsweb.site>
20 lines
501 B
JavaScript
20 lines
501 B
JavaScript
import { Inter, Roboto } from '@next/font/google'
|
|
const inter = Inter({ variant: '900', display: 'swap', preload: false })
|
|
const roboto = Roboto({
|
|
variant: '100-italic',
|
|
display: 'swap',
|
|
preload: true,
|
|
})
|
|
|
|
export default function Component() {
|
|
return (
|
|
<>
|
|
<div id="comp-with-fonts-inter" className={inter.className}>
|
|
{JSON.stringify(inter)}
|
|
</div>
|
|
<div id="comp-with-fonts-roboto" style={roboto.style}>
|
|
{JSON.stringify(roboto)}
|
|
</div>
|
|
</>
|
|
)
|
|
}
|