ReactJS Application Not loading custom fonts

Question

Doing a "Hello World" type of app for ReactJS and I modified the index.css to look like this:

css:

@font-face {
  font-family: Poppins;
  src: url(/fonts/poppin/Poppins-Light.otf);
}
body{
  margin: 0;
  padding: 0;
  font-family: Poppins;
  font-size: 16px;
  line-height: 1.2em;
}

The problem I am running into is the font will not load and I get the following warning in the console:

Failed to decode downloaded font: http://localhost:3000/fonts/poppin/Poppins-Light.otf
localhost/:1 OTS parsing error: invalid version tag

Oddly enough, I created a simple HTML and CSS document WITHOUT ReactJS and the font loads as expected without error. Is there something else I need to do in ReactJS to fix this?

webpack.config.js:

module.exports = {
    module: {
        rules:[
            {
        test: /\.(woff|woff2|ttf|otf)$/,
        loader: 'file-loader',
        include: [/fonts/],
        options: {
            name: '[hash].[ext]',
            outputPath: 'css/',
            publicPath: url => '../css/' + url
      }
        ],
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.jade$/, loader: "jade?self" }
        ]
    },
    node: {
        fs: "empty"
    }
}

Answer 1

as I mentioned this need to be configured in your webpack.config.js, file-loader plugin used to load and bundle file types:

here is a code snippet for web fonts

....
module: {
  rules: {
    ...
    // Font files
    {
      test: /\.(woff|woff2|ttf|otf)$/,
      loader: 'file-loader',
      include: [/fonts/],

      options: {
        name: '[hash].[ext]',
        outputPath: 'css/',
        publicPath: url => '../css/' + url
      }
    },
   ...
  }
}
...