[Android] Custom fonts not applied on nested text

[mikeygee]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 557.12 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.4 - /usr/local/bin/node
Yarn: 1.3.2 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
IDEs:
Android Studio: 3.0 AI-171.4408382
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1

Description

On Android only, when nesting text elements, and applying custom fonts to both the outer and inner text elements, the inner text does not apply the font, it falls back to default. This issue does not occur when using system fonts such as serif or monospace, it only happens when using two custom fonts. One custom font nested with a system font works fine. I am not sure if it is a problem with these specific fonts, but it works fine in iOS.

Reproducible Demo

https://github.com/mikeygee/AndroidFontIssue - I made a repo with a couple custom fonts added to assets/fonts directory. In App.js, there are several combinations to demonstrate the issue.

<View style={styles.container}>
    <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'Roboto', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'serif', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'customitalicfont', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'customitalicfont', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'customitalicfont', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'serif', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'customthickfont', fontSize: 20}}>Nested</Text>
    </Text>
    <Text style={{fontFamily: 'serif', fontSize: 20}}>
      Test
      <Text style={{fontFamily: 'monospace', fontSize: 20}}>Nested</Text>
    </Text>
</View>

[OmriSama]

+1, I think I'm running into the same issue :/

[gurol]

I have the same problem in Android (it works in iOS).

[OmriSama]

I think I got this to work by enabling font scaling?

EDIT: Yes. I was using Expo and initially disabled font scaling. Enabling font scaling fixed everything (eventually).

[duongntb94]

I have the same issue in Android

[rikur]

+1, works fine on iOS but Android ignores the fontFamily of nested elements.

FYI: I'm using react-native 0.57.2

[creativefctr]

Same issue here!

[nzliu]

Getting the same issue.

[rikur]

Still a bug on latest react-native.

[zackary-moore]

Same issue here as well.

[OmriSama]

@rikur @chalked do you guys have font scaling disabled?

[luukschipperheyn]

Same here - Enabling font scaling does not solve it for me.
[email protected]

[jdgarcia1381]

Same problem here. fontFamily is being ignored on nested Text and I can't find a solution for this. Enabling font scaling doesn't solve it for me. If I apply the same fontFamily on nested Text, it is ignored.
[email protected]

[DmytroT]

any news?
it works in <=0.49.5 versions.
and it doesn't work since 0.50 version.
it is important for our app and we can't use latest RN versions anymore... :(

[en-ospiewok]

We've found a solution, which worked in our case.
You have to set the style properties of your nested text component, so that the parent style properties do not have an effect on your nested text.

In our case we had a custom nested text inside a common text component and we were missing to set the fontWeight style property inside our nested custom text.
This was only an Android issue.

<Text style={{ fontFamily: baseFont, fontSize: 42, lineHeight: 48, fontWeight: '700', color: colors.white, }} numberOfLines={1}> <Text style={{ fontFamily:'our-custom-icons', fontWeight:'normal', color:'white', lineHeight: 50 }}>{'\uE921'} </Text> Some custom text follow up!} </Text>

Anyway, this will not solve the reported issue above, but might help hopefully some of you as well.

[lewie9021]

I've written a Medium post that goes more in depth, detailing my findings and an interim fix :) https://medium.com/@lewie9021/custom-fonts-in-react-native-85d814ca084#a01b

[rikur]

@lewie9021 thanks for sharing. Do you think this could be turned into an NPM package as a replacement for Text from RN?

[lewie9021]

I don't see why it couldn't be, but I'd prefer if the bug was fixed instead of releasing an NPM package that patches it. I just felt that it was pretty basic behaviour that should at least have a workaround for now.

[rikur]

Alright, I'll try to strip away the parts that don't apply to me, like Contexes and stuff. Thanks again!

[lewie9021]

You'll still need a form of Context. The FontFamilyContext is used to collect the styling as you nest, only applying the font family when a leaf Text component is encountered. Without it, if a containing Text component applied a bold font weight, the nested leaf Text component wouldn't know that it should apply a bold font family variant (unless overwritten through the component tree or directly).

[rikur]

I see. Thanks for the heads-up -- I might just have to wait for this to be fixed in RN then as I don't use Contexes and prefer to keep things that way.

[lewie9021]

I can understand not wanting to use Context :) In my article, I do briefly talk about another approach that uses React.Children.map and React.cloneElement to automatically delegate the props down through the tree. The main issue I had with the approach was that if custom Text components were used when nesting (e.g. Heading), it's not guaranteed to pass through the styling. As a result, it could become difficult to track down why the correct font variation isn't applied.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[tuandinh0801]

Works for me by adding fontWeight: 'normal' & fontStyle: 'normal'

<Text style={{ fontFamily: 'Quicksand-Medium', fontWeight: 'normal',  fontStyle: 'normal' }}>
      text abc
      <Text style={{ fontFamily: 'Gilroy-Bold' }}>Nested font text</Text>
</Text>

[hmol]

Works for me by adding fontWeight: 'normal' & fontStyle: 'normal'

<Text style={{ fontFamily: 'Quicksand-Medium', fontWeight: 'normal',  fontStyle: 'normal' }}>
      text abc
      <Text style={{ fontFamily: 'Gilroy-Bold' }}>Nested font text</Text>
</Text>

I hade the same problem, only on Android phones. The solution metioned above, solved it for me. Having a parent element with fontStyle: "normal" was what fixed it.

[ghost]

2020 still cant style nested text, this properties does not work in nested Text:

padding, margin, borderColor, borderWidth, borderRadius, lineheight, top, bottom, left, right, ...

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[DmytroT]

The issue has not been fixed. It looks like guys just ignore that.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[ghost]

This is still an issue

[fabOnReact]

I could not reproduce this in rn-tester using notoserif and rubik. I believe they are custom fonts https://github.com/react-native-training/react-native-fonts

is NotoSerif But Shows As Rubik shows correctly as NotoSerif

<Text style={{fontFamily: 'notoserif', fontSize: 20}}>NotoSerif not Rubik</Text>
<Text style={{fontFamily: 'rubik', fontSize: 20}}>
  Rubik
  <Text style={{fontFamily: 'notoserif', fontSize: 20}}> is NotoSerif But Shows As Rubik</Text>
</Text>

CLICK TO OPEN TESTS RESULTS

RN MASTER

[devethan]

Still an issue, the problem looks like related to custom font style on the Text of react-native module.
@qstrauss said we should use nested text like below

<Text>
      <Text style={{fontFamily: 'customFontFamily-Bold'}}>
            It seems to be
      </Text>
      <Text style={{fontFamily: 'customFontFamily-LightItalic'}}>
            the solution
      </Text>
</Text>

But I don't understand those style adoption because of the docs of react-native said

Theoretically speaking in above document, nested fonts inherit it's parents' style. But it cannot be worked in currently, and then default styles of font(the system font) will be adopted.

[1280103995]

Still unresolved. RN v0.64.2

[apedroferreira]

2021 reporting in! still have this issue, let's go all the way to 2025

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[liamjones]

Looks like this might be working in 0.66.3? I've not tried the minimal repro but I'm looking at an area of our app where I believe we had this issue it seems to be working now. Can anyone else confirm/deny?

[DmytroT]

It still doesn't work in 0.66.1
Going to check it in 0.66.3

[maxilie]

I'm on RN 0.68.2 with expo-font, and none of the suggested solutions are working for me. I've tried nesting Text elements horizontally instead of going deep, and I've also tried setting parent's fontStyle and fontWeight to 'normal'. Neither approach solves the problem.

Has anyone found another solution?

[github-actions]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.