CSS How do you override the custom font family set in the all selector?-CodePudding

I downloaded two custom fonts for my website, and I am trying to make one of them the default font for almost everywhere in the website, and the other one for some certain areas. So my code look something like this:

function App() {
  return (
    <div className="App">
      <nav>
        <ul className="Navbar">
          <li className="link1"><Link to="/">Home</Link></li>
          <li className="link2"><Link to="/AboutMe">AboutMe</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />}/>
        <Route path="/AboutMe" element={<AboutMe />}/>
      </Routes>
    </div>
  );
}

CSS:

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 18px;
    font-family: 'Montserrat-VariableFont_wght';
}

@font-face {
    font-family: 'BowlbyOneSC-Regular';
    src: url('../fonts/BowlbyOneSC-Regular.ttf') format('truetype');   
    font-weight: bold;
}

@font-face {
    font-family: 'Montserrat-VariableFont_wght';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}

.link1{
    font-family: 'BowlbyOneSC-Regular';
}

Both link1 and link2 are now in the font of Montserrat-VariableFont_wght, and when I remove font-family: 'Montserrat-VariableFont_wght';from the * selector. Link1 will then be BowlbyOneSC-Regular and then link2 become some random default font provided by browser, which is not what I want. So, how should I do it?

CodePudding user response：

You can make the

.link1{
    font-family: 'BowlbyOneSC-Regular' !important;
}

notice ! important this will override the link1 css and link2 will be default one defined.

You can do something like a utility class with the font face. I usually do .ff-roboto .ff-arial and implement font family there.

.ff-BowlbyOneSC';{
   font-family: 'BowlbyOneSC-Regular';
}

now you can use link2 as ff-BowlbyOneSC

<li className="link2 ff-BowlbyOneSC"><Link to="/AboutMe">AboutMe</Link></li>

* is not a good way of defining css property as it apply this font family to all the html element.

body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: 18px;
    font-family: 'Montserrat-VariableFont_wght';
}

you can also see I have removed regular from the name. It means you can also have font weight related utility functions like .fw-300 or fw-bold fw-black this how you can create reusable classes.