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"), }, }, };
4 Replies
StefanH
StefanH2y ago
Which browser are you using?
MarkBoots
MarkBoots2y ago
Here the same issue on stack overflow https://stackoverflow.com/questions/72577560/character-issue-with-the-bellefair-google-font The only suggestion there is to set font-weight to 400. (but don't know if that resolves your issue) Accordingly to google fonts, Bellefair only has a font-weight 400 / regular. You have set it to lighter So this might work (can not test it myself)
Stack Overflow
Character issue with the Bellefair google font
I'm currently using the Bellefair font from google for a project. However, I get these black inner lines on certain characters. Use the url to see the problem I'm dealing with. Can anyone enlighten...
StefanH
StefanH2y ago
I'm surprised this even renders weirdly for you because on my end it renders normally at 400 weight even when i set it to lighter (in firefox)
StefanH
StefanH2y ago
in firefox you get these great font debugging tools which you can use to play around with your fonts easily. kevin talked about it a couple times too
Want results from more Discord servers?
Add your server