Chrome and Firefox unable to parse and decode font

Question

I'm using Hapi on the backend and React on the frontend. My webpack config specifies the following:

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

The CSS:

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

The font works in Safari but in Chrome I get these errors:

And in firefox I get these errors:

I have tried the answers to the following stackoverflow question but it does not seem to be working: Webpack "OTS parsing error" loading fonts

Does anyone have any ideas how I can get the font working in Chrome and Firefox?