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>
);
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.
import './LoginPage.css
( Assuming the css file is in the same page as the LoginPage.js )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*/
}
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 )