font-family defined on body is not inherited by the input tag and placeholder

Question

How can I inherit the font style from body to the input text and placeholder?

body {
  font-family: "Circular", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
}

the input tag is being used:

<input
   type="text"
   value={value}
   onChange={onChange}
   placeholder={placeholder}
   className={styles.input}
/>

Currently, the global body font-family styling is not applying to the input text and placeholder. It only works if I add the font style explicitly like this:

.input {
    font-family: "Circular", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;

  &::placeholder {
    font-family: "Circular", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
    "Helvetica Neue", sans-serif;
  }
}