Failed to decode downloaded font react project

Question

I'm encountering an issue where I'm getting a "Failed to decode downloaded font" error when trying to load fonts in my project. Here's how I've set it up:

I have the following @font-face declarations in my src/assets/css/font.css file:

‍‍@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/woff/IRANSansX-Bold.woff') format('woff'),   
    url('../fonts/woff2/IRANSansX-Bold.woff2') format('woff2');  
}

@font-face {
    font-family: IRANSansX;
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/woff/IRANSansX-Regular.woff') format('woff'),   
    url('../fonts/woff2/IRANSansX-Regular.woff2') format('woff2');  
}

and have following config webpack in webpack.config.js:

{
        test: /\.(woff|woff2)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[contenthash].[ext]",
              outputPath: "assets/fonts/",
            },
          },
        ],
      },

These font files (IRANSansX-Bold.woff, IRANSansX-Bold.woff2, IRANSansX-Regular.woff, IRANSansX-Regular.woff2) are located in src/assets/fonts/woff/ and src/assets/fonts/woff2/ respectively.

In my App.js, I've imported font.css.

However, upon running the project, I'm encountering the error "Failed to decode downloaded font: http://localhost:9000/5ae4361b3573b0a4b906.woff".

I've ensured that:

The paths in @font-face are correct and point to the actual font files.
The font files are accessible from the server (localhost in this case).
The MIME types for WOFF and WOFF2 files are correctly configured on the server (application/font-woff and font/woff2).
I've tried clearing browser cache and checking browser developer tools for any additional errors or warnings related to font loading.
There are no browser security policies restricting external font loading.

Despite these efforts, I'm still facing the issue. Any suggestions or insights would be greatly appreciated!

enter image description here