How to set a global font family in react js?

user_13628101 0
Viewed 17954

I'm trying to set one font family for all text in react like this :

index.css file :

:root {
    font-family: 'Vazir', sans-serif !important;
}

But it doesn't apply and I have to apply font-family: 'Vazir', sans-serif !important; to every component css file .

How can I code font family once and it applies to every component text or How can I set a global font family style that applies to all text rendered in react js ?

reactjs css javascript
2 Answers

You should be fine adding your font-family to

body, html { 
  font-family: 'Vazir', sans-serif;
}

There are a few things to look out for when doing this in react:

  • Are you importing your CSS file into the root component? <App/>
  • Are you using a css-loader in your webpack configuration?
  • Are you setting your @font-family before trying to use it?
  • Or have you imported your font from a link="rel"?
user_113485020

If you want to effect the font of all text on all pages. Simply replace :root with *. The * selector effects everything on the given page.

Make sure to import your css file into every react page you want it to take effect on.

user_137945910
Related