Font looking very weird

My code in scss: @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; } } } my webpack: 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"), }, }, };