Next.js项目自定义字体导入失败求助

问题分析 #

你的自定义字体未生效，核心问题集中在以下几点：

1. @font-face 资源路径错误：Next.js中public目录下的资源无需加/public前缀
2. @font-face 缺少必要属性：未声明字体格式、权重等，浏览器无法正确识别
3. Tailwind配置不规范：字体族键名与类名大小写不匹配，且配置不完整
4. 全局样式优先级不足：自定义字体设置被Tailwind基础样式覆盖
5. 重复导入全局样式：layout和page同时导入globals.css可能引发冲突

修复步骤 #

1. 修正globals.css中的字体声明 #

调整路径，补充字体必要属性，并将全局字体设置放入@layer base提升优先级：

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'bornStrong';
    src: url(/fonts/BornStrong-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 避免字体加载时出现空白 */
}

@font-face {
    font-family: 'heywow';
    src: url(/fonts/HeyWow-Regular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@layer base {
  html, body {
    font-family: 'heywow', sans-serif;
  }

  h1, h2, h3 {
    font-family: 'heywow', sans-serif;
  }
}

/* 保留你原有的其余样式 */
.main {
  width: 100vw;
  min-height: 100vh;
  position: fixed;
  display: flex;
  justify-content: center;
  padding: 120px 24px 160px 24px;
  pointer-events: none;
}

/* 省略其余原有样式... */

2. 规范tailwind.config.js配置 #

统一字体族键名为小写（匹配Tailwind类名规则），补充缺失的plugins：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        bornstrong: ['bornStrong', 'sans-serif'], // 对应类名font-bornstrong
        heywow: ['heywow', 'sans-serif'], // 对应类名font-heywow
      },
      colors: {
        'primary-orange': '#FF5722',
      }
    },
  },
  plugins: [],
}

3. 移除重复的全局样式导入 #

仅在layout.jsx中保留globals.css导入，删除page.jsx中的重复导入：

// layout.jsx（保留导入）
import '@styles/globals.css';

const layout = () => {
  return (
    <div>
      <h1>AUHISI</h1>
    </div>
  );
}

export default layout;

// page.jsx（删除重复导入）
const Home = () => {
  return (
    <div>
      <h1 className="font-heywow">Page</h1>
      <p className="font-bornstrong">测试bornStrong字体效果</p>
    </div>
  );
}

export default Home;

4. 最终验证 #

• 确认public/fonts/目录下存在对应TTF字体文件
• 重启Next.js开发服务器（修改配置后必须重启）
• 清除浏览器缓存，避免旧资源干扰

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