CODEWITHSUNDEEP
cssreactjsstyled-components
samane yaghoobi
samane yaghoobi

Reputation: 195

How can set global font-family using Styled-Components

I want to set the font-family globally using Styled-Components. I used createGlobalStyle and set font to body, but the divs inside the body didn't inherit the font.

Here is my Styled-components body:

import {createGlobalStyle} from 'styled-components';

export const AppRoot = createGlobalStyle`
  body {
    @import url('../../font.css');
    font-family: Vazir !important;
    direction: rtl;
    text-align: right;
    cursor: default;
  }
`;

And here is how I use it:

import {AppRoot} from './StyledComponents';

ReactDOM.render (
  <Fragment>
    <AppRoot/>
    <App />
  </Fragment>,
  document.getElementById ('root')
);

enter image description here

Upvotes: 7

Views: 25075

Answers (2)

Deve
Deve

Reputation: 1779

I think you can do like this with * selector instead of body.

export default createGlobalStyle`
        * {
            @import url('../../font.css');
            font-family: Vazir !important;
            // CSS you want global. 
        }
    
`

I used it to create a reset css to remove some browser's rules.

Upvotes: 6

Punitha Subramani
Punitha Subramani

Reputation: 1477

My suggestion is to overwrite the value with exact format

In browser, the default style sheet mentioned the font in font shorthand format. Try to give the font in below format and let me know whether it is works.

 font: italic small-caps normal 13px/150% Vazir;

Upvotes: 3

Related Questions