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
Which browser are you using?
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...
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)
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