title: Load fonts with Webpack and font-face
body: <p>I'm trying to load a font in my CSS file using <code>@font-face</code> but the font never loads. This is my directory structure.</p>
  
  <p><a href="https://i.stack.imgur.com/D2QPK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/D2QPK.png" alt="enter image description here"></a></p>
  
  <p>Then in <code>webpack.config.js</code> I have the loader to get fonts.</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  
  module.exports = {
    devtool: 'eval',
    entry: [
      "./index.js"
    ],
    output: {
      path: __dirname+"/build",
      filename: "main.js"
    },
    plugins: [
      new webpack.NoErrorsPlugin(),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin()
    ],
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.js$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },
            { test: /\.jsx?$/, loaders: ['react-hot', 'babel-loader'], exclude: /node_modules/ },
            { test: /\.svg$/, loader: "raw" },
            { test: /\.css$/, loader: "style-loader!css-loader" },
            { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=src/css/[name].[ext]'}
  
        ]
    }
  };
  </code></pre>
  
  <p>Inside my CSS file I have this:</p>
  
  <pre><code>@font-face {
    font-family: 'Darkenstone';
    src: url('./Darkenstone.woff') format('woff');
  }
  
  body {
    background-color: green;
    font-size: 24px;
    font-family: 'Darkenstone';
  }
  </code></pre>
  
  <p>Finally, I'm calling my CSS file in my <code>index.js</code> with:</p>
  
  <pre><code>import './src/css/master.css';
  </code></pre>
  
  <p>Everything works but de font never loads.</p>