How are you supposed to format the output path in Webpack config for fonts?

The JS is bundling, the css is importing, but I am unable to change the font-family with this imported font. I believe it's an issue with the output config in my Webpack config but I've had no luck so far. All three formats of the font are valid, and I've used them in other projects. My "dist" folder is "public". In dev mode and after building the font does not apply.

Webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
        use: {
          loader: 'file-loader',
          options: {
            name: './[name].[ext]',
            outputPath: "./CovesTypeface",
          },
        },

      },
    ],
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "public/"),
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "/public/"),
    port: 3000,
    publicPath: "http://localhost:3000/",
    hotOnly: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

index.css

@font-face{
    font-family: 'CovesBold';
    src: url("CovesTypeface/CovesBold.woff") format("woff"),
         url("CovesTypeface/CovesBold.ttf") format("truetype"),
         url("CovesTypeface/CovesBold.otf") format("opentype");
}

*{
    margin: 0;
    padding: 0;
    font-family: 'CovesBold' !important;
}

Structure after building