how to implement fonts with Storybook 6.5 + webpack 5 + react.js 18 in year 2022

Question

i am trying to add custom fonts.

the tech stacks:

• webpack 5
• storybook 6.5
• react.js 18
• typescript
• docker
• year 2022
• yarn
• mac m1

this is my current implementation:

preview-head.html

<style type="text/css">
  @font-face {
    font-family: 'FSAlbert';
    src: url('assets/FSAlbertRegular.woff') format('woff'),
      url('assets/FSAlbertRegular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
  }
</style>

webpack.config.js

const path = require('path');

module.exports = async ({ config }) => {
  // styles
  config.module.rules.push({
    test: /\.(sass|scss)$/,
    use: ['resolve-url-loader'],
    include: path.resolve(__dirname, '../src')
  });
  // fonts
  config.module.rules.push({
    test: /\.(png|woff|woff2|eot|ttf|svg)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    ],
    include: path.resolve(__dirname, '../src')
  });

  return config;
};

package.json

"storybook": "start-storybook -p 6006  -c .storybook watch-css -s ./src"

folder structure:

The error i get after running yarn storybook

sharkysharksharks@sharkysharksharkss-MacBook-Pro val-ui-framework % yarn storybook
yarn run v1.22.18
$ start-storybook -p 6006  -c .storybook watch-css -s ./src
info @storybook/react v6.5.9
info 
(node:24301) DeprecationWarning: --static-dir CLI flag is deprecated, see:

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated---static-dir-cli-flag
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Loading presets
info => Serving static files from ././src at /
info => Loading custom manager config
info => Loading custom manager config
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Loading custom Webpack config (full-control mode).
ERR! ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[11].use[0] has an unknown property 'query'. These properties are valid:
ERR!    object { ident?, loader?, options? }
ERR!     at validate (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/schema-utils/dist/validate.js:105:11)
ERR!     at validateSchema (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/validateSchema.js:78:2)
ERR!     at create (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:111:24)
ERR!     at webpack (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:158:32)
ERR!     at f (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/index.js:64:16)
ERR!     at starterGeneratorFn (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:118:18)
ERR!     at starterGeneratorFn.next (<anonymous>)
ERR!     at Object.start (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:34)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28)
ERR!  ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
ERR!  - configuration.module.rules[11].use[0] has an unknown property 'query'. These properties are valid:
ERR!    object { ident?, loader?, options? }
ERR!     at validate (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/schema-utils/dist/validate.js:105:11)
ERR!     at validateSchema (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/validateSchema.js:78:2)
ERR!     at create (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:111:24)
ERR!     at webpack (/Users/sharkysharksharks/Documents/val/cebpac-ui-framework/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/webpack.js:158:32)
ERR!     at f (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/builder-webpack5/node_modules/webpack/lib/index.js:64:16)
ERR!     at starterGeneratorFn (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:118:18)
ERR!     at starterGeneratorFn.next (<anonymous>)
ERR!     at Object.start (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:34)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/sharkysharksharks/Documents/val/val-ui-framework/node_modules/@storybook/core-server/dist/cjs/dev-server.js:207:28) {
ERR!   errors: [

I followed this tutorial in youtube: https://www.youtube.com/watch?v=2kxeVjy39lI&t=710s
the github is: https://github.com/codeReview-youtube/story-custom-font