Font looking very weird

@font-face {
  font-family: "Bellefair";
  src: url("../assets/fonts/Bellefair-Regular.ttf") format("truetype");
  font-weight: lighter;
  font-style: normal;
}

.container {
  height: 100vh;
  background-color: #3ba7de;
  .header {
    padding: 15px 20px;
    background-color: #6200ee;
    h1 {
      color: rgb(193, 82, 160);
      font-family: "Bellefair";
      font-size: 130px;
    }
  }
}

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "./public"),
    filename: "bundle.js",
    // assetModuleFilename: "assets/fonts/[name][ext]"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.(s(a|c)ss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
        generator: {
          filename: "./fonts/[name].[ext]",
        },
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, "./public"),
    },
  },
};