react-native android fontFamily does not take effect

Question

Question 1:

I add a fontFamily to index.android.js's welcome style, but it takes no effect. Does fontFamily actually work on android?

welcome:{ fontSize:20, fontFamily:'roboto-thin', textAlign:'center', margin:10}

Question 2:

if fontFamily works on android, is there a way to load custom font from assets? Or is this some feature to be implemented by react-native?

Answer 1

For Android: Custom fonts were added with 0.16.0-rc. So you need to have 0.16.0-rc version first and after that you can just download any fonts from the web.

1. Put your font files in projectfolder/android/app/src/main/assets/fonts/font_name.ttf
2. Remember to recompile which is: react-native run-android
3. And then you can use fontFamily: 'font_name' in your style.

Answer 2

Also note the following restrictions for custom Android fonts in react-native:

• fonts must be placed in android/app/src/main/assets/fonts
• only .ttf files are supported
• The name of the file has to match the fontFamily exactly. For instance, if fontFamily is 'Source Sans Pro' , the file must be called Source Sans Pro.ttf (and NOT SourceSansPro.ttf ). Any suffixes as mentioned in the following paragraph are automatically removed from the file.
• When the font is in bold and/or italic, it must use on the following suffixes:
  • _bold (eg Source Sans Pro_bold.ttf )
  • _italic
  • _bold_italic

Answer 3

I believe the following is a cleaner alternative to the methods already explained here:

Put all your fonts in you React-Native project directory

./assets/fonts/

Add the following line in your package.json

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

finally run in the terminal from your project directory

$ react-native link

to use it declare this way in your styles

fontFamily: 'your-font-name without extension'

If your font is Raleway-Bold.ttf then,

fontFamily: 'Raleway-Bold'

---

Source https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4

Answer 4

Hello this issue waist for me more than two days with "El+Messiri" font " https://fonts.google.com/specimen/El+Messiri "

i was doing every think write :

1. Put your font files in projectfolder/android/app/src/main/assets/fonts/ElMessiri-Regular.ttf
2. Remember to recompile which is: react-native run-android And then

3. you can use fontFamily: 'ElMessiri-Regular' in your style.

   but the fault was that am using fontWeight : 'bold' after fontFamily: 'ElMessiri-Regular' and the fontWeight was overiding the fontFamily because "El+Messiri" font has his own fontFamily bold wich is "ElMessiri-Bold"

Answer 5

This feature has yet to be implemented. See the relevant issue on github here .

Answer 6

It seems like custom font was added, check out this commit:

https://github.com/facebook/react-native/commit/bfeaa6a4f531cfc18c097bc9ffb6a8dbe3ddc702

Answer 7

For those facing problems with iOS only - which sometimes does not recognize the fontFamily name correctly:

The only solution that solved my problem was to log all the fonts to find out correct naming

(make sure you do the steps below only after adding the assets/fonts and running the react-native link ):

Anyway, to log them, open the appName.xcworkspace file with xcode and then edit AppDelegate.m putting this lines at the end of the didFinishLaunchingWithOptions method (and before the return statement):

for (NSString* family in [UIFont familyNames])
  {
    NSLog(@"%@", family);
    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
      NSLog(@" %@", name);
    }
  }

So, when you run the app (from xcode) it outputs something like this:

This way, I can use the fontFamily Barow-Light or Zapfino inside my react-native styles

Hope it helped!

Answer 8

I had an incredibly hard time with this, even after following all advice I found.

What worked for me: ensure the font file is named using only lowercase letters and underscores. Re-link. Done.

A lot of hair pulling has been done over this yet it isn't mentioned anywhere as far as I can see.