我之前也碰到过一模一样的问题，核心就是Webpack没正确处理字体文件的打包路径和引用逻辑，导致浏览器找不到字体资源。你说系统安装字体后能正常显示，其实是浏览器自动 fallback 到了系统本地字体，并不是Webpack打包的字体生效了，咱们一步步来修复：

1. 补全必要的依赖 #

你当前配置里只用到了css-loader，但还需要style-loader把解析后的CSS注入到页面，同时确保url-loader能正确处理字体文件：

npm install style-loader url-loader --save-dev

2. 修改Webpack配置规则 #

重点调整CSS和字体文件的处理规则，确保字体能被正确打包并引用：

module.exports = {
  // ... 其他配置项
  output: {
    path: path.resolve(__dirname, 'dist'), // 你的打包输出目录
    filename: 'bundle.js',
    publicPath: './' // 关键：确保资源引用路径正确，可根据项目结构调整
  },
  module: {
    rules: [
      { 
        test: /\.jsx?$/, 
        use: 'babel-loader', 
        exclude: /node_modules/ 
      },
      // 修复CSS加载逻辑：先解析再注入页面
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 完善字体文件处理，覆盖所有常见格式
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000, // 小于100kb的字体转base64，大于的输出独立文件
            name: 'fonts/[name].[hash:8].[ext]', // 输出到dist/fonts目录，加hash做缓存
            publicPath: './' // 和output的publicPath对应，保证引用路径正确
          }
        }
      }
    ]
  }
}

3. 验证修复效果 #

打包后打开浏览器的Network面板，查看字体资源的请求状态：

• 如果显示200，说明字体加载成功；
• 如果是404，说明publicPath或outputPath配置不符合项目目录结构，调整路径即可。

为什么系统安装字体后能显示？ #

当系统本地存在Roboto字体时，浏览器会优先使用系统字体，跳过加载Webpack打包的字体文件，这就造成了“CSS没问题”的假象，但实际上Webpack打包的字体资源根本没被正确加载。

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