Next.js Discord

Discord Forum

How to load font dynamically?

Answered
Ojos Azules posted this in #help-forum
Open in Discord
Ojos AzulesOP
I want to load font by locale from next-intl, but it seem no work.
Answered by fuma
You can try using className instead like:

export default function RootLayout({ ... }) {
  return (
    <html
      lang={locale}
      className={clsx({
        [font.className]: ...,
      })}
    >
      <body>{children}</body>
    </html>
  );
}

and remove fontFamily.sans from your tailwind css configuration, it worked for me
View full answer

24 Replies

Ojos AzulesOP
// fonts.ts
import localFont from 'next/font/local'

export const sourceHanSansTC = localFont({
  src: '../assets/fonts/SourceHanSansTW-VF.ttf.woff2',
  weight: '100 900',
  variable: '--font-SourceHanSansTC',
})

export const sourceHanSansJP = localFont({
  src: '../assets/fonts/SourceHanSansJP-VF.ttf.woff2',
  weight: '100 900',
  variable: '--font-SourceHanSansJP',
})

export const sourceHanSansKR = localFont({
  src: '../assets/fonts/SourceHanSansKR-VF.ttf.woff2',
  weight: '100 900',
  variable: '--font-SourceHanSansKR',
})
// tailwind.config.ts
...
fontFamily: {
  sans: [
    'var(--font-SourceHanSansTC)',
    'var(--font-SourceHanSansJP)',
    'var(--font-SourceHanSansKR)',
    ...fontFamily.sans,
  ],
},
...
it works, when I load all the fonts at the same time:
fuma
You can try using className instead like:

export default function RootLayout({ ... }) {
  return (
    <html
      lang={locale}
      className={clsx({
        [font.className]: ...,
      })}
    >
      <body>{children}</body>
    </html>
  );
}

and remove fontFamily.sans from your tailwind css configuration, it worked for me
Answer
@fuma You can try using `className` instead like: tsx export default function RootLayout({ ... }) { return ( <html lang={locale} className={clsx({ [font.className]: ..., })} > <body>{children}</body> </html> ); } and remove `fontFamily.sans` from your tailwind css configuration, it worked for me
Ojos AzulesOP
it's works, but how do I use font.className with tailwindcss?
for example i'm using sonner for toasts, and I want to apply the font:
fuma
The font applied to body should be used by all elements, try removing font-sans.
@fuma The font applied to `body` should be used by all elements, try removing `font-sans`.
Ojos AzulesOP
https://nikke-wiki.vercel.app/about
here is the website that I removed font-sans
Ojos AzulesOP
sonner has default font-family
fuma
I see, you have to override the default font-family by setting it to font-family: inherit
Ojos AzulesOP
fuma
Nice :love:
@fuma Nice <a:love:1005468193994833952>
Ojos AzulesOP
do you know why it's still load all the fonts?
fuma
See the [Preloading](https://nextjs.org/docs/app/building-your-application/optimizing/fonts#preloading) section, Next.js automatically preloads all the fonts you have called in the page, even if it's not included in the class name.
try disabling it? I have never tried to implement a similar thing but it should be worked
@fuma try disabling it? I have never tried to implement a similar thing but it should be worked
Ojos AzulesOP
thx you so much.
i disabled all the preload