无法在NextUI NextJS中更改字体

ftf50wuq  于 11个月前  发布在  其他
关注(0)|答案(1)|浏览(97)

我使用Nextjs 14和NextUi作为UI库。我使用npx create-next-app -e https://github.com/nextui-org/next-app-template创建了应用程序
但是,当我在font.ts中更改字体时,无论我更改什么,它仍然显示相同的字体:

//font.ts
import { Montserrat as FontMono, Poppins as FontSans } from 'next/font/google';

export const fontSans = FontSans({
  weight: ['400', '500', '700'],
  subsets: ['latin'],
  variable: '--font-sans',
});

export const fontMono = FontMono({
  subsets: ['latin'],
  variable: '--font-mono',
});

个字符
在这里,我试图应用Poppins和Montserrat作为字体,但网站显示默认字体。无论我使用什么字体,它只显示默认字体。有人能帮忙吗?
我试过用tailwind.js.js来改变字体家族,但没有用。我也试过全局样式css,但也没有用。

20jt8wwn

20jt8wwn1#

看起来你正在使用next/font/google模块生成的字体的.variable属性。这意味着要应用字体,你需要在font-family声明中使用CSS变量。根据与Tailwind CSS集成的文档,你需要在Tailwind配置中包含以下内容:

/** @type {import('tailwindcss').Config} */
module.exports = {
  // …
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-sans)'],
        mono: ['var(--font-mono)'],
      },
    },
  },
}

字符串

相关问题