React JS - How can I change fonts family on a specific page?

Question

In the react application I developed, I generally use the ubuntu font. I just want to use nunito font for login and register page. As an example, I showed my login page. I want to change all kinds of text styles such as form items, buttons, titles (h1) in this card, how can I do this?

 return (
<div className="centerItems login">
  <Button
    className="back-to-home"
    href="https://www.example.com/"
    type="default"
    icon={<HomeOutlined />}
    size={"medium"}
  />
  <Card className="login-card">
    <div className="centerItems">
      <Image preview={false} width={200} src={logo} />
      <h1 style={{ marginBottom: 8 }}>Login</h1>
    </div>
    <div className="login-form">
    <LoginForm className="centerItems" />
    </div>
  </Card>
</div>
);

Answer 1

There are two ways to achieve what you want. I'm going to be assuming your loginpage component file is "LoginPage.js" Since the methods for both loginpage and registerpages are the same I'm only going to show how to do it for the loginpage.

By importing induvidual css files

1. In your LoginPage.js, add import './LoginPage.css ( Assuming the css file is in the same page as the LoginPage.js )
2. Add your styles there

Here is an example

In your LoginPage.js, return something like this -

import "./LoginPage.css"

export default function LoginPage() {
  return <div className="LoginPage-container"></div>
}

And in your LoginPage.css -

.LoginPage-container {
  background-color: black;
  font-family: "Nunito";
}

.LoginPage-container h1 {
  /*Styles for loginpage h1 here*/
}

By giving your component a className

When you call your component in your main file, add a className to it like so -

import LoginPage from "./pages/LoginPage.js"

return (
  <LoginPage className="LoginPage-container" /> 
);

Then style it in your main css file using the className "LoginPage-container" ( Like in the last example )