React JS - Using different fonts for different font weights?

Question

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.

Possible duplicate of [Multiple font-weights, one @font-face query](https://stackoverflow.com/questions/28279989/multiple-font-weights-one-font-face-query) — MTCoster, Jan 24 '19 at 17:14
@MTCoster - sadly not; I read that question, but it doesn't resolve the issue I'm having. — John Goodwin, Jan 24 '19 at 17:19
Is this vanilla React or are you using another library (like [glamor](https://github.com/threepointone/glamor)) to expose the `css` object? — MTCoster, Jan 24 '19 at 17:25
There’s a [very old open issue](https://github.com/threepointone/glamor/issues/40) over in the glamor repo regarding something similar. Note there have been no updates to glamor for over a year - I wouldn’t hold out hope for a fix anytime soon. — MTCoster, Jan 24 '19 at 17:35
Thanks, @MTCoster. I know that glamorous is no longer supported - they're suggesting everyone moves over to emotion, but I was hoping for a quick fix before I have to migrate all our code. — John Goodwin, Jan 24 '19 at 17:43
Here's a solution that might help https://stackoverflow.com/a/33687499/4525600 — cisco, Nov 12 '19 at 05:36

score 1 · Answer 1 · answered Nov 12 '19 at 05:42

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

Hope this is helpful

React JS - Using different fonts for different font weights?

1 Answers1