При использовании вебпака 5-го не подключается шрифт к html. В чем моя ошибка?

Пишу проект с использованием вебпака. Но при указанной ниже конфигурации вебпака шрифт не подключается /webpack.config.js

const path = require("path");
const HTMLWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserWebpackPlugin = require("terser-webpack-plugin");

console.log(process.env.NODE_ENV);
console.log(__dirname);
const isDev = process.env.NODE_ENV === "development";
const optimization = () => {
    const config = {
        splitChunks: {
            chunks: "all"
        }
    };

    if (!isDev) {
        config.minimizer = [new CssMinimizerPlugin(), new TerserWebpackPlugin()];
    }

    return config;
};

const cssLoaders = (extra) => {
    const loaders = [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: ""
            }
        }, {
            loader: "css-loader"
        },
    ]

    if (extra) {
        loaders.push(extra)
    }

    return loaders;
}

console.log('IsDev:', isDev);

module.exports = {
    context: path.resolve(__dirname),
    entry: path.join(__dirname, "src", "index.js"),
    output:
        {
            filename: "[name].[contenthash].js",
            path: path.resolve(__dirname, "dist")
        },

    optimization: optimization(),

    devServer: {
        port: 4200
    },

    plugins: [
        new HTMLWebpackPlugin(
            {
                title: 'Funiro',
                template: "./index.html",
                minify: {
                    collapseWhitespace: !isDev
                }
            }
        ),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin(
            {filename: "[name].[contenthash].css"}
        )
    ],

    module: {
        rules: [
            {
                test: /\.css$/,
                use: cssLoaders()
            },
            {
                test: /\.(ico|gif|png|jpg|jpeg|svg)$/,
                loader: 'file-loader',
                options: {
                    name: 'src/img/[name].[ext]',
                    publicPath: ''
                }
            },
            {
                test: /\.(ttf|woff|woff2|eot)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'src/fonts/'
                        }
                    }
                ],
            },
        ]
    }
};

/src/css/fonts.css

@font-face {
    font-family: 'Gilroy-Regular';
    font-weight: 400;
    src: url('../fonts/Gilroy-Regular.woff') format('font-woff');
}
@font-face {
    font-family: 'Gilroy-Bold';
    src: url('./../fonts/Gilroy-Bold.woff') format('font-woff');
    font-weight: 700;
}
@font-face {
    font-family: 'Gilroy-Semibold';
    font-weight: 600;
    src: url('../fonts/Gilroy-Semibold.woff') format('font-woff');
}
@font-face {
    font-family: 'Gilroy-Medium';
    font-weight: 500;
    src: url('../fonts/Gilroy-Medium.woff') format('font-woff');
}
@font-face {
    font-family: 'Icons';
    src: url('../fonts/icons.woff') format('font-woff');
    font-weight: 400;
}

/src/css/styles.css

@import './fonts.css';
@import './icons.css';

.main-class {
    font-family: 'Gilroy-Bold', sans-serif;
    font-size: 48px;
}

Шрифты подключаю в index.js

import './fonts/Gilroy-Bold.woff';
import './fonts/Gilroy-Medium.woff';
import './fonts/Gilroy-Regular.woff';
import './fonts/Gilroy-Semibold.woff';
import './fonts/icons.woff';
import './css/styles.css';

В DevTools стиль якобы применен, но визуально видно, что шрифт не применился который необходим. Во вкладке "Network", подключаемый файл шрифта отсутствует. Подскажите, пожалуйста, в чем заключается моя ошибка?