title: Rails 6 + Webpacker 4 + PostCSS & @font-face + Local fonts
body: <p>I'm trying to import fonts in my rails 6 app for hours now.
  It's a fresh app using Rails 6, Webpacker 4 and PostCSS.</p>
  
  <p>Everything is loaded (with no error) through webpack (css, js, images). Compilation is correct. Image are properly displayed (using css background:url).</p>
  
  <p><strong>OTF/EOT/WOFF fonts</strong> : Compiled properly and fonts inside my @font-face are loaded and salted by Webpack. The font are not rendered properly in view (I got the default browser font instead).</p>
  
  <p>I think I tried everything I know. I Switched file-loader for url-loader and back, with no success. Changed the folders hierachy, tried different fonts files, absolute urls (resolve-url-loader). Nothing seems to work.</p>
  
  <p>Anyone would be kind enough point me to the right direction or to share a working config of local fonts loading with webpacker on rails 6 and PostCSS ?</p>
  
  <p>Thank you in advance for your help.</p>
  
  <p>Here is my config :</p>
  
  <p>javascript > fonts</p>
  
  <pre><code>raleway_thin-webfont.woff
  </code></pre>
  
  <p>javascript > packs > application.js</p>
  
  <pre><code>require.context('../fonts/', true, /\.(eot|ttf|woff|woff2|otf)$/i);
  import "./application.pcss";
  import "js";
  
  require("@rails/ujs").start();
  require("turbolinks").start();
  require("@rails/activestorage").start();
  require("channels");
  </code></pre>
  
  <p>javascript > packs > application.pcss</p>
  
  <pre><code>@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway_thin-webfont.eot'), format('eot');
  }
  
  @font-face {
    font-family: 'Amaranth';
    src: url('../fonts/Amaranth-Regular.otf'), format('otf');
  }
  #test-div { font-family: 'Raleway'; }
  </code></pre>
  
  <p>/postcss.config.js</p>
  
  <pre><code> module.exports = {
    plugins: [
      require('postcss-import'),
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009'
        },
        stage: 3
      })
    ]
  };
  </code></pre>
  
  <p>/config > webpack > environment.js</p>
  
  <pre><code>const webpack = require("webpack");
  const { environment } = require("@rails/webpacker");
  const { VueLoaderPlugin } = require("vue-loader");
  const vue = require("./loaders/vue");
  // const url = require('./loaders/url');
  
  environment.plugins.append(
    "Provide",
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery",
      Tether: "tether",
      tether: "tether",
      Popper: ["popper.js", "default"]
    })
  );
  
  ["css", "moduleCss"].forEach(loaderName =&gt; {
    const loader = environment.loaders.get(loaderName);
    loader.test = /\.(p?css)$/i;
    environment.loaders.insert(loaderName, loader);
  });
  
  environment.plugins.prepend("VueLoaderPlugin", new VueLoaderPlugin());
  environment.loaders.prepend("vue", vue);
  
  // environment.loaders.prepend("url", url);
  // avoid using both file and url loaders
  // environment.loaders.get("file").test = /\.(tiff|ico|svg)$/i;
  
  module.exports = environment;
  </code></pre>
  
  <p>/config > webpack > loaders > url (not in use)</p>
  
  <pre><code>module.exports = {
    test: [/\.eot$/, /\.otf$/, /\.ttf$/, /\.woff$/, /\.woff2$/],
    use: [
      {
        loader: "url-loader",
        options: {
          limit: 10000,
          name: "[name]-[hash].[ext]"
        }
      }
    ]
  };
  </code></pre>