Vite React + Tailwind CSS 自托管字体无法正常工作问题求助

以下是排查和修复的关键步骤：

1. 确认字体文件路径与@font-face声明 #

• 将字体文件放在项目的public/fonts或src/assets/fonts目录下，确保路径准确。
• 在全局CSS文件（如src/index.css）中添加完整的@font-face声明，示例：

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

若字体放在src/assets/fonts，需用Vite资源导入方式避免路径错误：

import MontserratRegular from './assets/fonts/Montserrat-Regular.woff2';
import MontserratBold from './assets/fonts/Montserrat-Bold.woff2';

@font-face {
  font-family: 'Montserrat';
  src: url(${MontserratRegular}) format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

2. 在Tailwind配置中注册字体族 #

修改tailwind.config.js，在theme.extend.fontFamily中添加自定义字体：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      fontFamily: {
        montserrat: ['Montserrat', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

3. 应用自定义字体 #

• 全局应用：在全局CSS中添加body { font-family: 'Montserrat', sans-serif; }，或使用Tailwind类名font-montserrat。
• 组件内使用：直接给元素添加类名，如<h1 className="font-montserrat font-bold">示例标题</h1>。

4. 排查生产环境路径问题 #

• 若用public目录，打包后字体文件会放在dist/fonts下，/fonts/xxx路径有效。
• 若用src/assets，Vite会自动处理资源路径，生成带哈希的文件名，无需手动修改。

常见错误点 #

• 未声明对应权重的@font-face：比如使用font-bold但未注册700权重的字体，会 fallback到默认字体。
• 路径拼写错误：文件名大小写不一致、目录层级写错都会导致字体加载失败。
• 全局CSS未正确导入：确保src/index.css已导入到main.jsx入口文件中。

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