Next.js Discord

Discord Forum

How to use Noto Sans TC Variable font in Next/Font?

Answered
Ojos Azules posted this in #help-forum
Open in Discord
Ojos AzulesOP
I'm trying to use Noto Sans TC Variable font, but it's always fallback to Microsoft JhengHei.
import { Noto_Sans_TC } from 'next/font/google'

export const notoSansTC = Noto_Sans_TC({
  variable: '--font-NotoSansTC',
  weight: 'variable',
  subsets: ['latin'],
  display: 'swap',
  preload: true,
})

And Google Fonts does support Noto Sans TC Variable font:
https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap
Answered by Somali
Try using adjustFontFallback: false, disable preload and remove the specified subset. This snippet below works just fine for the Japanese variant of this font:

const notoSansJapanese = Noto_Sans_JP({
  weight: '400',
  preload: false,
})

If that doesn’t work, I’d just use a custom font face 🤷🏻 next/font still has some issues.
View full answer

2 Replies

Somali
Try using adjustFontFallback: false, disable preload and remove the specified subset. This snippet below works just fine for the Japanese variant of this font:

const notoSansJapanese = Noto_Sans_JP({
  weight: '400',
  preload: false,
})

If that doesn’t work, I’d just use a custom font face 🤷🏻 next/font still has some issues.
Answer