reactでfont-faceが上手く反映されない

font-faceの読み込みは上手くいっているが、反映されていない状態です。
フォントを反映するにはどうすれば良いでしょうか。

jsx
1import React from 'react';
2import ReactDOM from 'react-dom';
3
4import './assets/css/reset.css';
5import './assets/css/style.css';
6
7class App extends React.Component {
8  render(){
9    return(
10      <p>test</p>
11    );
12  }
13}
14
15ReactDOM.render(<App />, document.getElementById('root'));

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8  <title>Lorem Ipsum</title>
9</head>
10
11<body>
12  <div id="root"></div>
13  <script src="js/app.js"></script>
14</body>
15
16</html>

css
1@font-face {
2  font-family: 'myfont';
3  src: url('../fonts/CalibreSuperCondensed-Regular.otf') format('opentype'),
4       url('../fonts/CarneysGalleryDemoVersion-2Ov0o.otf') format('opentype'),
5       url('../fonts/OpenSans-CondLight.ttf') format('ttf');
6}
7
8p {
9  color: red;
10  font-size: 8rem;
11  font-family: 'myfont' , sans-serif;
12}
13

webpack
1module.exports = {
2  entry: {
3      app: "./src/index.jsx"
4  },
5  output: {
6      path: __dirname + '/public/js',
7      filename: "[name].js"
8  },
9  module: {
10      rules: [{
11          test: /.jsx$/,
12          exclude: /node_modules/,
13          loader: 'babel-loader'
14      },
15      {
16        test: /.(jpg|png|gif|svg)$/,
17        loader: ['url-loader'],
18      },{
19        // write files under 10k to inline or copy files over 10k
20        test: /.(woff|woff2|eot|ttf|otf)$/,
21        use: [{
22            loader: 'url-loader',
23            options: {
24              limit: 10000,
25              fallback: 'file-loader',
26              name: 'fonts/[name].[ext]',
27            },
28          }]
29      },
30      {
31        test: /.css$/,
32        use: ['style-loader', 'css-loader']
33      }]
34  },
35
36  resolve: {
37      extensions: ['.js', '.jsx']
38  },
39
40  devServer: {
41      contentBase: __dirname + '/public',
42      port: 8080,
43      publicPath: '/js/'
44  },
45  mode: 'development'
46}