Font weight above 400 upto 800 has no difference on <Text>, just gets bold

[ishaanbahal]

Environment

Environment:
OS: macOS High Sierra 10.13.5
Node: 8.1.2
Yarn: 1.7.0
npm: 5.0.3
Watchman: Not Found
Xcode: Not Found
Android Studio: 3.1 AI-173.4720617

Packages: (wanted => installed)
react: ^16.0.0 => 16.2.0
react-native: 0.52.2 => 0.52.2

Android version: 8.0+

Description

Font weight for above 400, simply gets bold upto 800, there is no actual visible change from 500-800. Have tried on multiple android devices but none show it correctly. I am trying to set the value to 500 according to some PM design, but cannot seem to achieve it. Reading the docs for Text, it states Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen. , so I'm wondering how to achieve this, if the platform doesn't support it. On iOS this seems to work normally though. Source : https://facebook.github.io/react-native/docs/text.html

I think this issue might not be resolvable, can someone help me with a simple solution to tackle this?

Also, would like to help by solving this if someone can guide me where the code files for this exist, will try to create a PR if I could solve it.

Steps to Reproduce

Check out this expo to view the issue https://snack.expo.io/SkxJLo1bm
Simply applying fontWeight to Text component with values 300, 500 and 700 respectively, you'll see difference only with 300 - 500, but not from 500-700

Expected Behavior

The font weight at 500 is thinner than at 700

Actual Behavior

There is no difference in font weights 500 and 700

[dulmandakh]

Here is the issue that tracks custom font support on Android #19736

[hey99xx]

Until RN has a better support for custom fonts on Android, simplest solution would be having different file names for each of the fonts, and refer to them with fontFamily alone, rather than using fontWeight.

For example if you have font weights of 300, 500, 700, name your files CustomFont300.ttf, CustomFont500.ttf, CustomFont700.ttf and use those file names (without the .ttf extension) as your fontFamily.

[ishaanbahal]

@hey99xx Okay, so I need to have custom fonts for android specifically? Because on iOS this works as it should. Isn't there a cleaner approach for this? I don't want to bundle extra fonts on iOS to combat an android specific issue. Anyway, thanks for the approach, will try it out!

[react-native-bot]

I am closing this issue because it does not appear to have been verified on the latest release, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.