[0.60.5] fontWeight Has No Affect on Android When Using Numerical Values

[AlexK777]

fontWeight properties on Text components are not having an affect on Android styles on React Native Version 0.60.5. If I use the bold value, the Text component picks up the bold style, but any other value 200 up through 800 all display the same appearance as normal or 100. I performed the same change on RN Version 0.59.10 and the Text component is styled correctly.

React Native version:

    OS: macOS High Sierra 10.13.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 13.78 GB / 32.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
    Yarn: 1.17.3 - ~/Developer/Projects/hy-vee-grocery/node_modules/.bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.3/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    Android SDK:
      API Levels: 23, 25, 26, 27, 28
      Build Tools: 27.0.3, 28.0.3, 29.0.2
      System Images: android-23 | Google APIs Intel x86 Atom, android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-26 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5692245
    Xcode: 10.1/10B61 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6
    react-native: 0.60.5 => 0.60.5

Steps To Reproduce

1. Change the fontWeight of a Text component from 100 to 600 on Android.

Describe what you expected to happen:
Text component should be styled with new fontWeight, but the style does not change.

Snack, code example, screenshot, or link to a repository:
RN 0.60.5

RN 0.59.10

I just used react-native init projects at RN 0.59.10 and 0.60.5 to reproduce this behavior.

[dulmandakh]

It's known issue due to Android limitations. Only way to use custom font weights is to create a custom font.

Android added support changing font weights programmatically, but won't work on older versions.

[hweister]

@dulmandakh why old version of react native works?

[jonnyberanek]

It's known issue due to Android limitations. Only way to use custom font weights is to create a custom font.

So... How would you go about doing that?

[chgsilva]

I am facing the same issue, any tips?

[cdunkel]

I have the exact same question as @hweister. If this were a pure Android limitation then why does it work in 0.58.6 on the same Android device / emulator?

[greg7gkb]

PR was here: #25341
Workarounds here: #25696

[es-lynn]

I wrote a npm package to handle mapping of custom fonts (eg. Roboto-Light, Roboto-Heavy) to font weights. Heavily modified from jacobcabantomski-ct's code above.

react-native-font-weight (alpha)

[ARDcode]

thanks @aelesia and @jacobcabantomski-ct for idea and code
its temporary solution before 0.62 release for Expo and RN: react-native-text-weight

[leolusoli]

Has it been fixed in RN 0.62.0?

[samufort]

Has it been fixed in RN 0.62.0?

No

[dacevedo12]

This issue should be reopened

[knoxgon]

Only 'bold' seems to be working... Badly need the numerical values.

[Saurabh-stack]

I am too facing same issue.
I am using expo client and Android mobile device. I tried installing custom font, still only bold (700 on android) and regular is working.
Issue should be reopen

[fabOnReact]

@Saurabh-stack #29117 fixes this. This issue will be closed once #29117 is merged

[zhigang1992]

It seems like roboto doesn't have 600 weight

https://fonts.google.com/specimen/Roboto#standard-styles

[AzadKshitij]

I still have the same issue can anyone tell me about how to solve it!!
react-native-cli: 2.0.1
react-native: 0.63.2

[danielfx90]

This is still happening, working with react-native v0.63.3.
Does software-mansion/react-native-screens#706 fix it? When will it be released?
EDIT: Nevermind, I just saw that it is another repository 🤦‍♂️

[thuynt99]

Have any solution to fix that? I not want to use fontWeight : 'bold', it too bold!

[fabOnReact]

@thuynt99 #29117

[anhquan291]

Have any solution to fix that? I not want to use fontWeight : 'bold', it too bold!

same issue here hic hic

[thuynt99]

@anhquan291 I use Platform below:
fontWeight: Platform === 'ios' ? '600' : 'bold'

[araujobarret]

Idk why this issue is closed since the problem persists

[Un-dev]

I also have this issue

[southkeys]

Bump. Seeking answers

[disko998]

The only way for me is a custom font, so you should just change the fontFamily accordingly ('roboto-bold, roboto-regular, etc.') witch is annoying...

[mausic]

react-native cli v0.64.1 issue still persist

[jtibrewal09]

Does anyone have a work around for it?

[KonstantinZhukovskij]

Have any solution to fix that?

[buitrbao222]

fontWeight 800 not working on Android but it does on iOS

[Navipro70]

Example:
If you have font Moderat (just example) and 3 types (Regular, Medium, Bold), font-weight on IOS will works normaly, but android understand only font-weight: "bold" (set and show Moderat bold font), other font-weight's (400, 500, 600 etc.) will set the regular font.

Solution is next:
We need to set fontFamily: 'ModeratMedium' if we need medium font on android.

All cases:

const IS_IOS = Platform.OS === 'ios'

const styles = StyleSheet.create({
  regular: {
    fontFamily: IS_IOS ? 'Moderat-Regular' : 'ModeratRegular'
  },
  medium: {
    fontFamily: IS_IOS ? 'Moderat-Medium' : 'ModeratMedium'
  },
  bold: {
    fontFamily: IS_IOS ? 'Moderat-Bold' : 'ModeratBold'
  },
})

And remember that IOS use post-script font name and Android use full font name

[gksander]

This isn't documented in the docs, but this is the associated Java code responsible for font-variant loading in Android:

/**
 * Responsible for loading and caching Typeface objects.
 *
 * <p>This will first try to load a typeface from the assets/fonts folder. If one is not found in
 * that folder, this will fallback to the best matching system typeface.
 *
 * <p>Custom fonts support the extensions `.ttf` and `.otf` and the variants `bold`, `italic`, and
 * `bold_italic`. For example, given a font named "ExampleFontFamily", the following are supported:
 *
 * <ul>
 *   <li>ExampleFontFamily.ttf (or .otf)
 *   <li>ExampleFontFamily_bold.ttf (or .otf)
 *   <li>ExampleFontFamily_italic.ttf (or .otf)
 *   <li>ExampleFontFamily_bold_italic.ttf (or .otf)
 */
@Nullsafe(Nullsafe.Mode.LOCAL)
public class ReactFontManager {


  // NOTE: Indices in `EXTENSIONS` correspond to the `TypeFace` style constants.
  private static final String[] EXTENSIONS = {"", "_bold", "_italic", "_bold_italic"};
  private static final String[] FILE_EXTENSIONS = {".ttf", ".otf"};
  private static final String FONTS_ASSET_PATH = "fonts/";

This means font variants are quite limited in React Native Android. You can apply fontWeight: 'bold' if the _bold.ttf font is installed,fontStyle: 'italic' if the _italic.ttf font is installed, and both weight/italic if _bold_italic.ttf is installed.

However... these are the only options relative to fontWeight, based on the source code. If you want to use fontWeight: '600', the best option is probably to create a new font file with this font + weight, give it a new name, and apply it through the fontFamily style property. This is a bit of a bummer though, since this means more manual work fiddling with fontFamily.

It'd be a nice addition to be able to add additional font variants (beyond just _bold, _italic, and _bold_italic) -- but I won't look a gift horse in the mouth. Perhaps this could be a community effort!

[fabOnReact]

as a note for the future 39e64c0 was refactored with 9d2fedc

[1Jesper1]

Thanks @thuynt99

[Forpee]

Anybody found the solution?

[tibbus]

@Forpee this should be fixed in the last React Native version v0.65.1

[faraxftw]

It seems to me, it's still not working - 0.65.1 is used

Font file looks like this:

Is being used like this

And it doesn't apply to Android
iOS:

Android:

Or is the whole way, that I use the font, "wrong"?

[imVinayPandya]

Sep 2021 same issue is still going on.

[fabOnReact]

Version 0.65 includes my pr to this issue.

The fontStyle italic was not meant to be used with numeric fontWeights in my PR.

My changes do not apply the 100-900 fontWeight if you are using Italic or Bold-Italic styles.

The Italic or Bold Italic style over-rides the 100-900 fontWeight.
You either use fontStyle Italic and Bold or Italic, but can not use fontWeight 100-900 with fontStyle Italic.

if (style == Typeface.ITALIC) {
  newStyle = (newStyle == Typeface.BOLD) ? Typeface.BOLD_ITALIC : Typeface.ITALIC;
  typeface = Typeface.create(typeface, newStyle);
}

I can try to find an alternative solution and prepare a new pr in the future.

The idea behind this was if you are using Bold and/or Italic, we will not use 100-900, but this probably was wrong way to solve this and I should revisit my solution.

I also need to verify that numeric fontWeights (100-900) are easy to use and implement in ReactNative with the above functionalities, maybe there are some limitations in the Android API.

Remember that fontWeight 100-900 is only available since API 28

https://github.com/fabriziobertoglio1987/react-native/blob/4cd0ea2039abc343bfea93a754952beec39b971c/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactTypefaceUtils.java#L112-L114

    if(Build.VERSION.SDK_INT > Build.VERSION_CODES.O_MR1 && weight > Typeface.BOLD_ITALIC) {
      typeface = Typeface.create(typeface, weight, italic);
    }

as a note for the future 39e64c0 was refactored with 9d2fedc

The original solution was changed in the Master Branch.
I have to take that in consideration when writing a fix.

[faraxftw]

Okay, that surely makes sense.
I just grabbed the first example, to show it. There are many, but I happened to grab one of the two italic ones 😄
So I removed the "italic" and... well. Same behaviour:

iOS:

Android:

The API of the Android Emulator is 31.

But... It seems, like this problem goes further on my side - because I can't explain to myself, why even writing directly "OpenSans-Bold" or "OpenSansBold" won't apply.
I checked, if those assets are in the android folder, passed them manually into android/app/src/assets/fonts, because linking doesn't seem to work.
I guess therefore it's more likely, that the reason why it won't work, lays somewhere in my project - but who knows

EDIT:
I just solved my problem, I think.
Yes, if e.g. "italic" is set as fontStyle, it doesn't apply the fontWeight.

Long story short: My fonts weren't linking properly, after renaming the "react-native-config.js" to "react-native.config.js", I was able to execute "npx react-native link", which solved it.
As for the italic-thingy, I'm generally back to regular custom font usage without fontStyle or -Weight.

[fabOnReact]

My implementation:

if (family != null) {
  typeface = ReactFontManager.getInstance().getTypeface(family, newStyle, weight, assetManager);
}
// some logic
return typeface;

The previous implementation:

if (family != null) {
  typeface = ReactFontManager.getInstance().getTypeface(family, want, weight, assetManager);
}
// some logic
return typeface

I did not test the scenario using a specific fontStyle and I did not notice it did not work.

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactFontManager.java

Lines 69 to 72 in c447b25

	public Typeface getTypeface(
	String fontFamilyName, int style, int weight, AssetManager assetManager) {
	return getTypeface(fontFamilyName, new TypefaceStyle(style, weight), assetManager);
	}

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/TypefaceStyle.java

Lines 45 to 55 in c447b25

	public TypefaceStyle(int style, int weight) {
	if (style == ReactBaseTextShadowNode.UNSET) {
	style = Typeface.NORMAL;
	}
	mItalic = (style & Typeface.ITALIC) != 0;
	mWeight =
	weight == ReactBaseTextShadowNode.UNSET
	? (style & Typeface.BOLD) != 0 ? BOLD : NORMAL
	: weight;
	}

react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactFontManager.java

Lines 74 to 97 in c447b25

	public Typeface getTypeface(
	String fontFamilyName, TypefaceStyle typefaceStyle, AssetManager assetManager) {
	if (mCustomTypefaceCache.containsKey(fontFamilyName)) {
	// Apply `typefaceStyle` because custom fonts configure variants using `app:fontStyle` and
	// `app:fontWeight` in their resource XML configuration file.
	return typefaceStyle.apply(mCustomTypefaceCache.get(fontFamilyName));
	}
	AssetFontFamily assetFontFamily = mFontCache.get(fontFamilyName);
	if (assetFontFamily == null) {
	assetFontFamily = new AssetFontFamily();
	mFontCache.put(fontFamilyName, assetFontFamily);
	}
	int style = typefaceStyle.getNearestStyle();
	Typeface assetTypeface = assetFontFamily.getTypefaceForStyle(style);
	if (assetTypeface == null) {
	assetTypeface = createAssetTypeface(fontFamilyName, style, assetManager);
	assetFontFamily.setTypefaceForStyle(style, assetTypeface);
	}
	// Do not apply `typefaceStyle` because asset font files already incorporate the style.
	return assetTypeface;
	}

I will have to read the changes in master and fix this issue.