CSS font-weight property is either bold or light-CodePudding

I'm facing a weird issue with font-weight property on a button element
When I set font-weight to 400, it works just fine.
However, if I try to set it to 300 or 500, nothing changes.
It only becomes bold if I do font-weight: 600, which isn't even imported!

Using !important doesn't help either

I have also checked that the style isn't overwritten.

I'm using Inter font family, and React library

My index.html (inside 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 where the bug occurred (on button with 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:

*,
*::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);
}

CodePudding user response：

I think the matter is form elements don't inherit font settings automatically. Try to explicitly set in CSS file: button {font-family: inherit}; and apply desired font-weight on the button class further: .add-note {font-weight: 400};

That is relevant for inputs, textareas as well.