37

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?

3
  • 1
    What about using sans-serif-thin?
    – Simas
    Oct 12, 2015 at 19:39
  • yes, "sans-serif-thin" works.
    – Matthew
    Oct 13, 2015 at 20:36
  • 1
    Good. That's the standard way to use the thin font family. Android does not use the name roboto (except in the guidelines). Answering question 2: google it. It's unofficially possible and there are multiple questions about it.
    – Simas
    Oct 13, 2015 at 20:42

8 Answers 8

57

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.
4
  • what if I wanted to apply specific font to my every component of my application globally ? e.g :- Like in HTML, we write font-family into body tag inorder to get that same base font everywhere, likewise is there any trick for android ? Apr 18, 2016 at 7:23
  • @YashVekaria yes - check out react-native-global-props here: github.com/Ajackster/react-native-global-props
    – peteclark3
    Jan 31, 2017 at 18:39
  • @peteclark3 Thank you. Feb 2, 2017 at 6:28
  • 3
    a version of what ?
    – user1731387
    Dec 21, 2017 at 5:22
40

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
2
  • 2
    Hi. In my plist i have SourceSansPro-Italic.ttf, SourceSansPro-Bold.ttf, and SourceSansPro-Regular.ttf. When i put Source Sans Pro inside fontFamily (example: fontFamily: 'Source Sans Pro') works fine. But i can't found the way for call -Italic and -Bold. I have tried with Source Sans Pro-Bold, Source Sans Pro_Bold and not works. Can you helpme with this?
    – jose920405
    Sep 27, 2017 at 14:22
  • This solution in particular has helped me. I haven't seen this information been present in any other answers. I have had set everything up as was necessary, and was apparently missing proper naming of the font file. Once I have added _bold_italic to it, everything worked. FYI, I also had to declare equivalent CSS properties on the style that used that font. @ljzerenHein Thank you for this answer! Jan 25, 2021 at 19:15
8

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"

1
  • Such a valuable answer, that solved it for me! Jul 22, 2022 at 20:53
7

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

1
1

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

1
  • Out of date. Please amend
    – AWrightIV
    Jan 31, 2017 at 18:43
1

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

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

1

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:

Output print screen from Xcode logs

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

Hope it helped!

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.