Can I change the font family on a specific page in Ubuntu using React JS?

Goktug
May 25, 2023
260 views
3 votes
3 Answers

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>
);

Answers

you will need to import css file how many fonts, you want to use. example add multiple fonts

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Pangolin&family=Roboto&display=swap");

I chose three fonts. and you can add to apply html

 document.documentElement.style.fontFamily = "Pangolin";

if you want to apply body tag

 document.body.style.fontFamily = "Pangolin";

and at your root App component. make a fun to add based on the url here is my example

 useEffect(() => {
    addFontBasedOnRoute();
  }, [pathname]);

  const addFontBasedOnRoute = useCallback(() => {
    switch (pathname) {
      case "/":
        document.documentElement.style.fontFamily = data[0];
        break;
      case "/about":
        document.documentElement.style.fontFamily = data[1];
        break;
      case "/blog":
        document.documentElement.style.fontFamily = data[2];
        break;
      default:
        break;
    }
  }, [pathname]);

- SandyKrish
- May 25, 2023 at 11:37 am
- 0 votes
0
No need to write any scripts.
You can do it with CSS alone. Since you have the .login class in the wrapper ensure that you also have the unique class name in the register form and then you can add the CSS like this,
```
.login * {
  font-family: <your-fontfamily>
}

.register * {
  font-family: <your-fontfamily>
}
```
[OR]

If you can able to add class in the tag itself by using router logic based on which page you currently are then you can add the font-family to the body tag with the class name you added. like this

Consider that class name I added using router logic to body is nunito-font
```
body.nunito-font {
 font-family: <your-fontfamily>
}
```
Login or Signup to reply.

- amaldude
- May 25, 2023 at 11:55 am
- 0 votes
0
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.js"

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 )
Login or Signup to reply.