Chrome and Firefox cannot parse and decode the font

Question

I use Hapi on the backend and React on the interface. My webpack configuration says the following:

module: { loaders: [ { test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader?name=public/ozregular.otf'} ] }, 

CSS:

 @font-face { font-family: OzRegular; src: url(/ozregular.otf) format("opentype"); } 

The font works in Safari, but in Chrome I get the following errors:

And in firefox, I get the following errors:

I tried the answers to the following stackoverflow question, but it doesn't seem to work: Webpack "OTS parsing error" font download

Does anyone have any ideas how I can get a font that works in Chrome and Firefox?