title: Cannot embed custom fonts using vuejs2 and webpack
body: <p>I am trying to embed custom fonts within my website. I am using VueJS 2 and Webpack 2. I am new to both so forgive me if this is something really simple.</p>
  
  <p><strong>My vuejs src structure:-</strong></p>
  
  <pre><code>  |---src
    |--assets
    |  |- fonts
    |  |--- 2E8332_1_0.eot
    |  |--- 2E8332_0_0.woff2
    |  |--- 2E8332_1_0.woff
    |  |--- 
    |--styles
    |  |- _fonts.scss
    |  |- _global.scss
  </code></pre>
  
  <p><strong>_fonts.scss:-</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>@font-face {
    font-family: 'HalisGR-Black'; 
    src: url('../assets/fonts/2E8332_1_0.eot'); 
    src: url('../assets/fonts/2E8332_1_0.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/2E8332_1_0.woff2') format('woff2'), url('../fonts/2E8332_1_0.woff') format('woff'), url('../assets/fonts/2E8332_1_0.ttf') format('truetype');
  }
  </code></pre>
  
  <p><strong>_global.scss:-</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>@import 'src/assets/styles/_fonts.scss';
  
  h1, h2 {
      font-weight: bold;
      font-family: 'HalisGR-Black', Helvetica, Arial, sans-serif;
  }
  </code></pre>
  
  <p><strong>webpack.base.conf.js:-</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>var path = require('path')
  var utils = require('./utils')
  var config = require('../config')
  var vueLoaderConfig = require('./vue-loader.conf')
  
  function resolve(dir) {
      return path.join(__dirname, '..', dir)
  }
  
  module.exports = {
      entry: {
          app: './src/main.js'
      },
      output: {
          path: config.build.assetsRoot,
          filename: '[name].js',
          publicPath: process.env.NODE_ENV === 'production' ?
              config.build.assetsPublicPath :
              config.dev.assetsPublicPath
      },
      resolve: {
          extensions: ['.js', '.vue', '.json'],
          alias: {
              'vue$': 'vue/dist/vue.esm.js',
              '@': resolve('src')
          }
      },
      module: {
          rules: [{
                  test: /\.(js|vue)$/,
                  loader: 'eslint-loader',
                  enforce: 'pre',
                  include: [resolve('src'), resolve('test')],
                  options: {
                      formatter: require('eslint-friendly-formatter')
                  }
              },
              {
                  test: /\.vue$/,
                  loader: 'vue-loader',
                  options: vueLoaderConfig
              },
              {
                  test: /\.js$/,
                  loader: 'babel-loader',
                  include: [resolve('src'), resolve('test')]
              },
              {
                  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                  loader: 'url-loader',
                  options: {
                      limit: 10000,
                      name: utils.assetsPath('img/[name].[hash:7].[ext]')
                  }
              },
              {
                  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                  loader: 'url-loader',
                  options: {
                      limit: 10000,
                      name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
                  }
              }
          ]
      }
  }
  </code></pre>
  
  <p>Where am I going wrong because the font does not seem to load in the console I get this message as seen in this <a href="https://i.stack.imgur.com/7rbie.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7rbie.jpg" alt="screenshot of error"></a></p>
  
  <p>I have tried different path names such as:</p>
  
  <pre><code>./src/assets/fonts/font_name
  /assets/fonts/font_name
  </code></pre>
  
  <p>none seem to work. Thanks in advance</p>