Import 'typeface...' doesn't work when the route is different from ./files/..., could this be optionally adjusted?

[kuworking]

I'm trying to use a ES6 npm package within a react application embedded into WordPress

So I need to transpile this package, and this part works

But in this package I use typefaces, and then it doesn't work

So I add the webpack part that AFAIK should work, and it works (transpilation-wise), but the imported css is importing fonts from a fixed URL and then it doesn't work

This is my webpack configuration

// webpack.config.js
 const path = require('path')
const defaults = require('@wordpress/scripts/config/webpack.config')
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  ...defaults,
  entry: {
    index: path.resolve(process.cwd(), 'src', 'index.js'), // my component
    card: path.resolve(process.cwd(), 'src', 'gutenberg/card.js'), // my component for gutenberg
  },
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
  module: {
    ...defaults.module,
    rules: [
      ...defaults.module.rules,

       // to transpile my ES6 component that uses typefaces
      {
        test: /\.js$/,
        include: [/node_modules\\@kuworking\\mycomponent1/, /node_modules\\@kuworking\\mycomponent2/],
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react'],
            plugins: ['@babel/plugin-transform-modules-commonjs'],
          },
        },
      },

       // to transpile the typefaces that my component uses
      {
        test: /\.css$/,
        use: [
          {
            loader: require.resolve('css-loader'),
            options: {
              sourceMap: !isProduction,
            },
          },
        ],
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
            },
          },
        ],
      },
    ],
  },
}

Then I can load the fonts manually

  @font-face {
    font-family: 'Handlee';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local('Handlee Regular '), local('Handlee-Regular'),
      url('./wp-content/themes/mytheme/build/files/handlee-latin-400.woff2')
        format('woff2'),
      url('./wp-content/themes/mytheme/build/files/handlee-latin-400.woff')
        format('woff');
  }

So I guess the question is whether typefaces could implement a way to include an optional particular route so that the import 'typeface-open-sans' could work?

---

In my case, I've just installed the package and then created an @emotion component

const Fonts = styled.div`
  @font-face {
    font-family: 'Handlee';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local('Handlee Regular '), local('Handlee-Regular'),
      url('.${props => props.fonts}/files/handlee-latin-400.woff2')
        format('woff2'),
      url('.${props => props.fonts}/files/handlee-latin-400.woff')
        format('woff');
  }
`

Then I'm using this component to add the fonts with a customized folder

I guess I'm not loading the fonts as fast as if I imported a global css