在Webpack中配置CSS @font-face引入自定义字体失败问题求助

以下是针对你遇到的字体加载问题的排查和修复步骤：

1. 修正 CSS 中的相对路径 #

打包后 CSS 文件的位置决定了字体资源的相对引用路径。如果你的 CSS 最终输出在 dist/css 目录，那么相对于 CSS 文件，字体文件位于上一级的 fonts 目录，此时需要调整 @font-face 的路径：

@font-face {
  font-family: Roboto;
  src: url("../fonts/roboto.woff2");
}

2. 配置 file-loader 的 publicPath（关键） #

Webpack 打包时，file-loader 需要明确资源的公共访问路径，避免因输出目录层级差异导致路径错误。修改你的 file-loader 配置，添加 publicPath 选项：

{
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: "file-loader",
      options: {
        name: "[name].[ext]",
        outputPath: "fonts/",
        publicPath: "../fonts/" // 根据 CSS 输出位置调整，若 CSS 在根目录则用 "./fonts/"
      },
    },
  ],
}

添加后，file-loader 会自动将 CSS 中的字体路径替换为正确的公共路径，无需手动修改 CSS 代码。

3. 验证打包结果 #

打包完成后，检查以下内容：

• dist/fonts 目录下是否存在 roboto.woff2 文件
• 打开打包后的 CSS 文件，确认 @font-face 中的 src 路径是否指向正确的资源位置
• 在浏览器中直接访问字体文件的 URL（如 http://localhost:8080/fonts/roboto.woff2），确认文件能正常下载

4. 排查字体文件本身 #

如果上述步骤都没问题，尝试直接在浏览器中打开字体文件，确认文件未损坏。若文件无法打开，重新下载或替换Roboto字体文件。

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