CODEWITHSUNDEEP
cssreactjsimportfonts
John Goodwin
John Goodwin

Reputation: 93

React JS - Using different fonts for different font weights?

I'm trying to use different fonts for different font weights in ReactJS, but having tried two different import methods in our global stylesheet, I can only load either the first or last imported font.

Is this possible in ReactJS? I've never had a problem using the same sort of method elsewhere.

This only loads the first font:

css.global(
'@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraLight} )`,
  fontWeight: 'lighter',
  fontStyle: 'normal',
},
'@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraRegular} )`,
  fontWeight: 'normal',
  fontStyle: 'normal',
},
'@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraMedium} )`,
  fontWeight: 'bold',
  fontStyle: 'normal',
},
'@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraBold} )`,
  fontWeight: 'bolder',
  fontStyle: 'normal',
}
);
css.global('html', {
  color: '#231e21',
  fontFamily: 'ModernEra, sans-serif',
  userSelect: 'none',
  fontWeight: 'bold',
});

And this only loads the last (I can see why):

css.global('@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraLight} )`,
  fontWeight: 'lighter',
  fontStyle: 'normal',
});
css.global('@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraRegular} )`,
  fontWeight: 'normal',
  fontStyle: 'normal',
});
css.global('@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraMedium} )`,
  fontWeight: 'bold',
  fontStyle: 'normal',
});
css.global('@font-face', {
  fontFamily: 'ModernEra',
  src: `url( ${ModernEraBold} )`,
  fontWeight: 'bolder',
  fontStyle: 'normal',
});
css.global('html', {
  color: '#231e21',
  fontFamily: 'ModernEra, sans-serif',
  userSelect: 'none',
  fontWeight: 'bold',
});

I'd like to be able to define the font with either 'lighter', 'normal', 'bold' or 'bolder'. Has anyone come up against the same issue, or have a solution?

Thanks.

Upvotes: 1

Views: 3220

Answers (1)

cisco
cisco

Reputation: 888

It looks like the font weight specified aren't enumerating to their rightful numeric values. Therefore, try specifying numeric values as well!

Here's a posted solution that helped me understand and resolve this issue: https://stackoverflow.com/a/33687499/4525600

Credit to weirdpanda

Credit to weirdpanda

Hope this is helpful

Upvotes: 1

Related Questions