I've encountered a strange issue with the font-weight property when applied to a button element. When set to 400, everything functions as expected. However, attempting to set it to either 300 or 500 does not produce any noticeable changes. Interestingly, the text only becomes bold at font-weight: 600, despite this weight not being explicitly imported.
Even using !important doesn't seem to resolve the problem.
I have verified that the style is not being overridden during rendering.
The font family in use is Inter, and the React library is being utilized.
Here is my index.html file located within the public folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="favicon.ico?v=2" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Apple notes (not really)"
/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<title>Apple notes</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
JSX snippet where the anomaly occurred (specifically on the button with the class add-note):
import React, { useState, useEffect } from "react";
export default function Sidebar() {
return (
<aside className="sidebar">
<div className="sidebar-header">
<button type="button" className="add-note">Add new note</button>
</div>
<div className="sidebar-notes-list">
<div className="note"></div>
<div className="note"></div>
<div className="note"></div>
</div>
</aside>
)
}
CSS styles being applied:
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
}
.add-note {
font-size: 1.2rem;
font-weight: 600;
color: var(--clr-font-light);
background-color: var(--clr-accent-light);
border: none;
border-radius: 5px;
padding: 10px;
width: 100%;
}
.add-note.dark {
background-color: var(--clr-accent-dark);
color: var(--clr-font-dark);
}