Next.js项目中Material UI Table如何使用本地字体（非Theme方案）

先修正最直接的错误 #

你在Home.module.css里定义的样式类是.reset-font，但JSX中调用的是styles.testFont，类名完全不匹配，这是样式不生效的核心原因之一，先把类名统一：

<div className={styles.resetFont}> 
  {/* Toolbar 和 Typography 代码保留 */}
</div>

调整字体文件路径 #

Next.js 的public目录是静态资源的根路径，@font-face里的资源路径不需要用相对路径../../，直接从根目录开始编写即可：

@font-face {
  font-family: "Reset";
  src: url('/assets/font/reset.ttf');
  font-weight: bold;
  font-style: normal;
}

处理Material UI组件的样式优先级 #

Material UI 的内置组件（比如Typography）有默认字体样式，优先级可能高于你的模块CSS，可通过两种方式快速解决：

1. 直接在组件sx属性中指定字体
   跳过CSS模块，直接给目标组件设置字体，优先级更高：

   <Typography
     sx={{ 
       flex: '1 1 100%',
       fontFamily: '"Reset", sans-serif',
       fontWeight: 'bold'
     }}
     variant="h6"
     id="tableTitle"
     component="div"
   >
     JOBS
   </Typography>
   

2. 给CSS类添加强制优先级
   如果想保留CSS模块的写法，给样式加!important覆盖默认样式：

   .reset-font{
     font-family: 'Reset', sans-serif !important;
     font-weight: bold !important;
   }
   

关于本地字体加载插件的问题 #

Next.js 13及以上版本不需要额外插件就能加载本地字体，只要文件放在public目录下且路径正确即可。如果是旧版本，或者想更规范地管理字体，可以用官方的next/font模块（无插件依赖）：

// 在组件文件顶部导入next/font/local
import { LocalFont } from 'next/font/local';

// 定义本地字体
const resetFont = LocalFont({
  src: '../../public/assets/font/reset.ttf',
  weight: '700',
  style: 'normal',
});

// 使用时给父容器添加字体类名
<div className={resetFont.className}>
  <Toolbar>
    <Typography variant="h6">JOBS</Typography>
  </Toolbar>
</div>

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