Why fontFamily is not working in iOS using React-Native?

2
votes

I am working on custom font in react-native but it's working absolutely fine in Android but in iOS is not working, error message is "Unrecognized font family".

iOS Font Family Setup Steps :

  1. Copy-Pasted .ttf file in Resources

  2. Info.plist -> Fonts provided by application -> AllerRegular.ttf

  3. Project Clean and Build.

Resources:

enter image description here

Info.plist :

enter image description here

Error Message:

enter image description here

Stylesheet Code :

fonts_label: {
  fontFamily: "AllerRegular",
  fontSize: 12,
}

Please kindly go through the post and let me know.

Thanks

2
react-nativefont-family
Tried deleting ios/build or react-native start --reste-cache? + Adding the font to Copy Bundle Resources in Build Phases. – mcmhav
@Deeptiman Pattnaik Did you figured something out regarding to this problem? – bdart

2 Answers

2
votes

100% Working solution for Custom FontFamily in Android and iOS

1) Add the "font.ttf" file to Assets folder in React Native App.
2) Open "font.ttf" file in Font Book (in macbook).
3) Find the PostScript name "fontName" (you will get this text at the top).
4) Rename the "font.ttf" with PostScript name "fontName" ("fontName.ttf").

5) Added this code to Package.json

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

6)Then run the below code to link assets:

react-native link

7) Close everything and start again and run the react native app.
0
votes

iOS does not use the file name to identify the font as Android does. You can open the font file using the OS X Font Book App and check for yourself, or you can ask your app to tell you the exact name that it is going to use, as detailed in this post (Step 5: Find the name of the font). I suspect there is where your problem lies. Otherwise check that you followed all the steps detailed in that article.