下载的Google Font在React项目中无法使用，报错求助

路径配置错误 #

React项目里src目录不属于可直接访问的静态资源目录，浏览器请求/src/...路径会返回错误内容，进而导致字体解码失败：

• 将下载的字体文件移动到项目根目录的public文件夹下，比如新建public/fonts/Work_Sans目录存放字体文件
• 修改@font-face的URL路径，从public根目录开始编写：

@font-face {
  font-family: "Work Sans";
  src: local("Work Sans"),
    url(/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf) format("truetype");
}

字体文件本身存在问题 #

错误提示的invalid sfntVersion通常意味着字体文件损坏或格式异常：

• 重新从Google Fonts下载完整的Work Sans字体包，避免下载过程中文件损坏
• 检查页面实际加载的字体文件与代码引用是否一致：错误里显示加载的是WorkSans-Regular.ttf，但你代码里写的是可变字体文件，可能存在引用冲突，确保所有地方使用同一套字体文件

自定义Webpack配置的额外检查 #

如果是自行配置Webpack的React项目，需要确保添加了字体文件的处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

使用Create React App的话，默认已包含该配置，无需额外修改。

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