如何修改NextUI的默认font-family？

下面针对Next.js + NextUI的常见配置场景，给出修改字体族的实操步骤：

一、基于Tailwind CSS集成的项目（主流场景） #

NextUI默认和Tailwind CSS深度集成，修改字体需要同步配置Tailwind和NextUI的主题：

1. 更新tailwind.config.js
   在项目根目录的tailwind.config.js中，扩展Tailwind的字体族配置，并在NextUI插件中指定使用该字体：

import { nextui } from '@nextui-org/react';

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {
      fontFamily: {
        // 替换为你需要的字体，比如自定义本地字体或Web字体
        sans: ['Inter', 'system-ui', 'sans-serif'],
        // 也可以单独定义一个字体族给NextUI组件用
        nextui-custom: ['"Segoe UI"', 'Roboto', 'sans-serif']
      },
    },
  },
  darkMode: "class",
  plugins: [nextui({
    theme: {
      fonts: {
        // 直接引用Tailwind中定义的字体族，或者写完整字体声明
        sans: "font-sans",
        // 或者：sans: "'Inter', system-ui, sans-serif"
      }
    }
  })],
};

2. 引入Web字体（如果使用非系统字体）
   如果用Google Fonts这类Web字体，在路由入口文件中引入：

• App Router（app/layout.js）：

import '@/styles/globals.css';
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

• Pages Router（pages/_app.js）：

import '@/styles/globals.css';
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

function MyApp({ Component, pageProps }) {
  return (
    <div className={inter.className}>
      <Component {...pageProps} />
    </div>
  );
}

export default MyApp;

二、纯CSS引入NextUI的场景 #

如果未使用Tailwind，直接引入NextUI的CSS文件，可通过全局CSS覆盖字体变量：

1. 创建并编辑全局CSS文件
   在styles/globals.css中添加：

/* 覆盖NextUI的全局字体变量 */
:root {
  --nextui-font-sans: 'Inter', system-ui, sans-serif;
  --nextui-font-mono: 'JetBrains Mono', monospace;
}

/* 或者直接给全局body设置字体 */
body {
  font-family: 'Inter', system-ui, sans-serif !important;
}

2. 调整CSS引入顺序
   确保你的全局CSS在NextUI的CSS之后引入，比如在_app.js/layout.js中：

import '@nextui-org/react/dist/css';
import '@/styles/globals.css';

三、单独修改单个组件的字体 #

如果仅需给特定NextUI组件设置字体，直接通过className或style属性指定：

import { Button, Card } from '@nextui-org/react';

export default function Demo() {
  return (
    <>
      <Button className="font-nextui-custom">带自定义字体的按钮</Button>
      <Card style={{ fontFamily: "'Segoe UI', Roboto, sans-serif" }}>
        这个卡片用了单独的字体
      </Card>
    </>
  );
}

内容的提问来源于stack exchange，提问作者Kevin