Unrecognized font family on iOS simulator with Rea

问题:

I've added Linux Biolinum fonts (http://www.dafont.com/linux-biolinum.font, LinBiolinum_R.ttf, LinBiolinum_RB.ttf) to my React Native project. Android version is OK. But on iOS I always see error "Unrecognized font family LinBiolinum_R".

My style is:

customFontRegular: {
    fontFamily: 'LinBiolinum_R',
},

I've tryied to rename font file and font family to "MyFont", but the error appears again on iOS.

Any ideas?

回答1:

On Android it takes the name of the file and you are done. On iOS however it is a bit more complex.

There are a few steps you should take:

• Double check the font files are included in the Target in XCode
• Make sure they are included in the step "Copy Bundle Resources" (add files, not folders)
• Include them in the Info.plist of the app
• Find the name of the Font through FontBook or with some log statements in your AppDelegate

Explained in more detail here: http://codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/

Good luck!

回答2:

For me, changing the name of the file to the name of the Font (displayed as I open the file) did it.

回答3:

Implement the following code in your appdelegate file

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

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

You should use FONT FAMILY NAME instead of your font file name like the following

fontFamily: "FuturaBT-Book"

回答4:

Add this to your package.json

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

and then run react-native link in command line

回答5:

For IOS,

• Make sure you add fonts to resource Copy Bundle Resources

• Make sure you have folder Resources in Xcode, somehow it was deleted and you must create, import fonts to that folder manually

• Make sure using name of Family in Font book

回答6:

I renamed the font files and re-ran react-native link and ended up in this state.

I resolved it by ensuring the old fonts were removed from the Resources folder and Info.plist and then ran the build again.

回答7:

If you are running react-native ios simulator, you should include fonts in the xcode project directory.

react-native link react-native-vector-icons doing so , will add the fonts to Resources folder in xcode project and also add fonts to pinfo list.

回答8:

In my case the name of the ttf file was wrong. I had to edit ios/MyApp/Info.plist and change manually the filename of the font.

From:

...
<array>
  <string>Roboto_medium.ttf</string>
...

To:

...
<array>
  <string>Roboto-Medium.ttf</string>
...

回答9:

You can also try this, specify your fonts this way, map them into three styles:

For instance Gilroy-SemiBoldItalic

// iOS
{
  fontFamily: 'Gilroy',
  fontWeight: '600',
  fontStyle: 'italic'
}

// Android
{
  fontFamily: 'Gilroy-SemiBoldItalic'
}

You can also create a function to generate styles for a font with given weight and style.

Hope this helps

回答10:

I had the same issue and fixed it by just opening the project in Xcode and under Resources folder in Project Navigator, there were duplicate fonts and just removing them from Resources folder and Info.plist both, the issue got resolved. Just run the app in Xcode after deletion then you may verify in your other tools as well without reinstalling npm. Just run 'react-native run-ios', cheers :)