title: Vue Cli 3 Local fonts not loading
body: <p>When trying to load custom local fonts in Vue CLI 3 the fonts still will not appear. I am not receiving any error messages. The inspector shows the correct rule being loaded, but fonts are falling back to <code>serif</code> on #app. Fonts are not showing up in my dist folder anywhere.</p>
  
  <p>I have tried adding loaders in vue.config.js, changing url paths, and moving the @font-face rules around to different locations, changing the public path to ' ' and '/', importing scss into main.js.</p>
  
  <p>Font loading:</p>
  
  <pre><code>@font-face {
      font-family: 'OpenSans-Regular';
      src: url('/assets/fonts/OpenSans-Regular.eot');
      src: url('/assets/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
           url('/assets/fonts/OpenSans-Regular.otf') format('font-opentype'),
           url('/assets/fonts/OpenSans-Regular.woff') format('font-woff'),
           url('/assets/fonts/OpenSans-Regular.ttf') format('font-truetype'),
           url('/assets/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
  </code></pre>
  
  <p>And use within App.vue: </p>
  
  <pre><code>&lt;style lang="scss"&gt;
  #app {
    font-family: 'OpenSans-Regular', serif;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>That styling is placed within my <code>main.scss</code> file. The file structure as follows:</p>
  
  <pre><code>src
    assets
      fonts
        OpenSans-Regular.eot
        OpenSans-Regular.woff
        etc
    styles
      main.scss
    App.vue
  vue.config.js
  </code></pre>
  
  <p><code>vue.config.js</code> file is as follows:</p>
  
  <pre><code>module.exports = {
    publicPath: '/',
    css: {
      sourceMap: true,
      loaderOptions: {
        sass: {
          data: `@import "@/styles/main.scss";`
        }
      }
    },
    configureWebpack: {
      module: {
        rules: [{
          test: /\.(ttf|otf|eot|woff|woff2)$/,
          use: {
            loader: "file-loader",
            options: {
              name: "fonts/[name].[ext]",
            },
          },
        }]
      }
    }
  }
  </code></pre>
  
  <p>I have also tried a chainWebpack in <code>vue.config.js</code> to no avail:</p>
  
  <pre><code>chainWebpack: config =&gt; {
      config
        .module
        .rule("file")
        .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/,)
        .use("url-loader")
        .loader("url-loader")
        .options({
          limit: 10000,
          name: 'assets/fonts/[name].[ext]'
        })
        .end();
    }
  </code></pre>