React+Tailwind项目中自定义@font-face字体不显示问题求助

核心问题1：修改了node_modules内的文件 #

直接修改node_modules/tailwindcss/tailwind.css完全无效——依赖包更新时这个文件会被覆盖，且Tailwind的编译流程不会读取这里的自定义@font-face规则。

核心问题2：字体文件路径错误 #

字体文件放在public目录下，url路径必须以/开头（指向项目根目录），否则会根据当前CSS文件的相对路径查找，导致浏览器找不到字体文件。

核心问题3：字体权重不匹配 #

你定义的字体权重是600，但使用font-serif类时，浏览器默认会调用400权重的字体。如果没有对应权重的字体定义，就会 fallback 到默认衬线字体。

修复步骤： #

1. 移除node_modules里的自定义代码
   删掉你加在node_modules/tailwindcss/tailwind.css中的@font-face规则，永远不要修改依赖包内的文件。

2. 在项目自有CSS文件中添加@font-face
   在src目录下的全局CSS文件（比如src/index.css）中添加规则，同时确保这个文件被React入口文件导入：

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   @font-face {
     font-family: "tiempos-headline";
     src: local('tiempos-headline'), url("/tiempos-headline-medium.woff2") format("woff2");
     font-weight: 600;
     font-display: swap; /* 可选，优化字体加载体验 */
   }
   

   入口文件（如src/index.js）中导入该CSS：

   import './index.css';
   

3. 匹配字体权重使用
   因为你只定义了600权重的字体，使用时需要加上对应权重类：比如给元素添加font-serif font-semibold（font-semibold对应Tailwind的600权重）。

   如果需要默认400权重的字体，需要补充对应的@font-face规则（前提是有对应字体文件）：

   @font-face {
     font-family: "tiempos-headline";
     src: local('tiempos-headline'), url("/tiempos-headline-regular.woff2") format("woff2");
     font-weight: 400;
     font-display: swap;
   }
   

4. 验证资源加载状态
   打开浏览器开发者工具的「网络」面板，确认tiempos-headline-medium.woff2的请求状态为200。如果是404，检查字体文件是否确实放在public根目录下，路径是否拼写正确。

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