Rails 6 + Webpacker 4 + PostCSS & #font-face + Local fonts - ruby-on-rails

Question

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.
Everything is loaded (with no error) through webpack (css, js, images). Compilation is correct. Image are properly displayed (using css background:url).
OTF/EOT/WOFF fonts : 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).
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.
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 ?
Thank you in advance for your help.
Here is my config :
javascript > fonts
raleway_thin-webfont.woff
javascript > packs > application.js
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");
javascript > packs > application.pcss
#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'; }
/postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
};
/config > webpack > environment.js
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 => {
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;
/config > webpack > loaders > url (not in use)
module.exports = {
test: [/\.eot$/, /\.otf$/, /\.ttf$/, /\.woff$/, /\.woff2$/],
use: [
{
loader: "url-loader",
options: {
limit: 10000,
name: "[name]-[hash].[ext]"
}
}
]
};