react-native: custom font is not working

Is this a bug report?

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

Yes

Environment

react-native -v: 0.46.4
node -v: 6.11.0
npm -v: 3.10.10
yarn --version: 0.27.5

Then, specify:

Target Platform: Android

Development Operating System: Windows

Build tools:

Steps to Reproduce

I need to make a custom font
Then assign it some attributes

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

onrun

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 24 (6 by maintainers)

Most upvoted comments

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

+24

adarshTS on Aug 11, 2017

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

+24

joshjconlin on Aug 10, 2017

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.

+15

peterp on Aug 3, 2017

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",
      },
    }),

+11

rajsuvariya on Jul 29, 2017

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

mrezzaaa on Apr 12, 2018

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

adarshTS on Aug 3, 2017

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

adarshTS on Aug 8, 2017