TTF fonts don't display in the browser when bundling with webpack

Question

I'm trying to bundle a static webpage with webpack. npm run build is working just fine with all of the javascript, sass, and font and image assets being compressed and sent to the dist file. The problem is the browser doesn't display my fonts. This is what my webpack config file looks like

module.exports = {
  entry: './public/app.js',
  output: {
    path: __dirname + '/public/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      test: /\.(scss)$/,
      use: [
        'style-loader',
        'css-loader',
        'sass-loader'
      ]
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: [
        { loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            useRelativePath: true,
            outputPath: 'assets/images'
          } 
        }
      ]
    },
       {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          { loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            useRelativePath: true,
            outputPath: 'assets/fonts'
          } 
        }
        ]
      }
    ]
  }
}

I've tried using font loader, I've tried using url loader, I've tried using loaders specifically for ttf, ie ttf-loader. I've tried various permutations on the code quoted above as suggested here , I've tried adding sourceMap=true to sass loader. I've tried converting my fonts to other formats but no luck.

My guess is that there's something wrong with the way I've imported the fonts in my Sass file, since there's nothing ostensibly wrong when I build.

@font-face {
  font-family: "Oswald-Light";
  src: url("../assets/fonts/Oswald-Light.ttf") format("truetype"),
       url("../assets/fonts/Oswald-Light.ttf") format("truetype");
}

@font-face {
  font-family: "Oswald-Regular";
  src: url("../assets/fonts/Oswald-Regular.ttf") format("truetype"),
       url("../assets/fonts/Oswald-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Lato";
  src: url("../assets/fonts/Lato-Regular.ttf") format("truetype"),
       url("../assets/fonts/Lato-Regular.ttf") format("truetype");
}

Is there anything glaringly obviously wrong with any of the above code?

Answer 1

对于将来遇到其他麻烦的人-看到一些线程在问类似的问题-请考虑使用Google字体，然后在头中插入一个链接标签。

<link href="https://fonts.googleapis.com/css?family=Lato|Oswald&display=swap" rel="stylesheet">