React-native: custom font is not working

[adarshTS]

Is this a bug report?

NO

Have you read the Bugs section of the How to Contribute guide?

Yes

Environment

1. react-native -v: 0.46.4
2. node -v: 6.11.0
3. npm -v: 3.10.10
4. yarn --version: 0.27.5

Then, specify:

• Target Platform: Android

• Development Operating System: Windows

• Build tools:

Steps to Reproduce

1. I need to make a custom font
2. Then assign it some attributes
   3.

Expected Behavior

After saving the fonts in my assets folder of my project I linked it by the command react-native link
the links were installed and I cross checked the installation in my android>src>main>assets>fonts and everything was fine there too and I expected to get the custom font using the styling fontFamily: 'Coda-Heavy' but I didn't get the required custom font in run

Actual Behavior

[rajsuvariya]

For resources, Android doesn't accept Capital letters or hyphen (-). Try to rename the fonts and use the convention followed in the following code snippet. This snippet works for me.

...Platform.select({
      ios: {
        fontFamily: "PFEncoreSansPro-Medium",
      },
      android: {
        fontFamily: "pfencoresanspro_medium",
      },
    }),

[adarshTS]

thanks, @rajsuvariya but it's not working my fonts were in lowercase but couldn't get the desired font even then i tried to change according to your suggestion but even then its not working

[liquidprogrammer]

@adarshTS What fonts do you use? I mean, what extension? I work with ttf fonts, and everything is fine with them (i used this guide, was very helpful for me https://medium.com/@gattermeier/custom-fonts-in-react-native-for-android-b8a331a7d2a7).

Also, my fonts path is a little bit different: android/app/src/main/assets/fonts, but may be i just have an old project structure :)

[adarshTS]

@liquidprogrammer I also use ttf font, I don't know why is it not working I had already referred that article when I was doing this

[peterp]

The issue here is that on Android you have to match the filename exactly, e.g.: MyFont-SemiBold.ttf should be references as: { fontFamily: 'MyFont-SemiBold'}, and the path where the fonts are stored is android/app/src/main/assets/fonts

This is not an issue, but perhaps the documentation for the text component should reflect how to use custom fonts in Android and iOS.

[adarshTS]

@peterp I have followed the same but still it's not working

[rajsuvariya]

@adarshTS Looks like the guide you are using is outdated. I followed this https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e and I am able to load custom fonts in my app.

When you do react-native link you should get something like this

[adarshTS]

I have done all the same process but the problem is encountered only when I use some particular fonts like
SwitzerlandCondBlack Italic and SwitzerlandCondBlackPSMT

[rajsuvariya]

@adarshTS Can you push your code on git and post a link here?

[adarshTS]

@rajsuvariya I have created a demoApp and have used this custom font just check it out its still not working
https://github.com/adarshTS/demoApp

[rajsuvariya]

@adarshTS Have you figured out the issue? if yes, please post the solution here it may help others facing the same issue

[adarshTS]

Well I don't know how it worked when I was moving to some other fonts I gave it a final try and it worked. Couldn't figure out if its the problem with the emulator or something else because I double checked everything before making a demoApp for others to check the problem. Happy that its working fine now

[joshjconlin]

I had this issue, and it ended up being because i was using font-weight. see https://hiddentao.com/archives/2017/03/10/get-custom-fonts-working-in-react-native/ for a work around

[adarshTS]

when we are using custom fonts we can't assign fontWeight or fontStyle because it makes the custom font disabled and after adding "rnpm": { "assets": [ "./assets/fonts/" ] }
to your package.json and then linking it by using react-native link refreshing emulator won't show the added custom output we need to reinstall/compile the app again using react-native run-android/ios

this is what I observed

[sunweiyang]

I'm seeing this problem, but I don't believe I have fontWeight or fontStyle set (I filed #17641 which was marked as a duplicate). Anyone else experiencing this too?

[cjadhav]

Hi @sunweiyang,

You can follow these methods as show in this link.
https://hiddentao.com/archives/2017/03/10/get-custom-fonts-working-in-react-native/

It's really nice to use all fonts.
This solves my problem, I hope it might help you too..

[wamry]

i'm facing the same issue, RN version 0.55.1, using real device android 4.4.2.

this issue should re-opened.

[mrezzaaa]

Yeah,me too . using latest RN and gradle-4.4-all but still not works

[Shanie1331]

I am also having the same issue. Please help.

[divyanshverma]

+1

[ayehia]

+1 the same issue

Update:
Sorry, it's my fault :)

[mwmwmw]

This may help some of you.

Make sure you add

  "rnpm": {
    "assets": [
        "./assets/fonts/"
    ]
  }

to your package.json before you react-native link

[aleppos]

@mwmwmw I am already doing this but react-native link not finding anything

[Cicko]

Using fontWeight was my problem. Thank you to you all!!