title: Use font-face with webpack encore
body: <p>So I'm working on a symfony 4 project, and since I have no choice, I'm using webpack encore.
  In my css, I'm trying to use a font, imported with font-face.</p>
  
  <p>So I have : </p>
  
  <p>assets/css/app.css:</p>
  
  <pre><code>...
  @font-face 
  {
      font-family: "myfont";
      src: url('build/fonts/myfont.eot'); /* IE9 Compat Modes */
      src: url('build/fonts/myfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('build/fonts/myfont.woff') format('woff'), /* Modern Browsers */
           url('build/fonts/myfont.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('build/fonts/myfont.svg#myfont') format('svg'); /* Legacy iOS */
  }
  ...
  </code></pre>
  
  <p>my fonts are in assets/fonts/</p>
  
  <p>I tried differents paths / ways and got differents error messages, the current one being :</p>
  
  <p>These relative modules were not found:</p>
  
  <ul>
  <li>./build/fonts/myfont.eot in ./node_modules/css-loader??ref--1-2!./assets/css/
  app.css</li>
  <li>./build/fonts/myfont.svg in ./node_modules/css-loader??ref--1-2!./assets/css/
  app.css</li>
  <li>./build/fonts/myfont.ttf in ./node_modules/css-loader??ref--1-2!./assets/css/
  app.css</li>
  <li>./build/fonts/myfont.woff in ./node_modules/css-loader??ref--1-2!./assets/css
  /app.css
  error Command failed with exit code 2.</li>
  </ul>
  
  <p>Please note that I want to keep it simple, not downloading something that should not be needed to do such a simple stuff.</p>
  
  <p>So my question is : what is THE official / basic way to do it (which path in the font-face, and which config if needed) ?
  I searched for several days but nothing I found was working or applicable to my case, this is particularly frustrating knowing that it should be super easy.</p>
  
  <p>My webpack.config.js is the default one, unmodified : </p>
  
  <pre><code>var Encore = require('@symfony/webpack-encore');
  
  Encore
  // directory where compiled assets will be stored
  .setOutputPath('public/build/')
  // public path used by the web server to access the output path
  .setPublicPath('/build')
  // only needed for CDN's or sub-directory deploy
  //.setManifestKeyPrefix('build/')
  
  /*
   * ENTRY CONFIG
   *
   * Add 1 entry for each "page" of your app
   * (including one that's included on every page - e.g. "app")
   *
   * Each entry will result in one JavaScript file (e.g. app.js)
   * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
   */
  .addEntry('app', './assets/js/app.js')
  .addEntry('index', './assets/js/index.js')
  //.addEntry('page2', './assets/js/page2.js')
  
  /*
   * FEATURE CONFIG
   *
   * Enable &amp; configure other features below. For a full
   * list of features, see:
   * https://symfony.com/doc/current/frontend.html#adding-more-features
   */
  .cleanupOutputBeforeBuild()
  .enableBuildNotifications()
  .enableSourceMaps(!Encore.isProduction())
  // enables hashed filenames (e.g. app.abc123.css)
  .enableVersioning(Encore.isProduction())
  
  // enables Sass/SCSS support
  //.enableSassLoader()
  
  // uncomment if you use TypeScript
  //.enableTypeScriptLoader()
  
  // uncomment if you're having problems with a jQuery plugin
  //.autoProvidejQuery()
  ;
  
  module.exports = Encore.getWebpackConfig();
  </code></pre>
  
  <p>Thank you</p>