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 (e.g. 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"