Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Unrecognized font family on iOS simulator with React Native

Tags:

react-native

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".

enter image description here

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?

like image 231
valerybodak Avatar asked Feb 23 '17 08:02

valerybodak


People also ask

How add fonts to IOS react native?

1. Open your project in Xcode and make a fonts folder. You will drag and drop your font files into this newly created folder.

How do I unlink fonts from react native?

Navigate to android/app/src/main/assets/fontsAnd remove the fonts you want out. And that'll be all.


Video Answer


2 Answers

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!

like image 92
Wietse Venema Avatar answered Oct 18 '22 18:10

Wietse Venema


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"
like image 28
IKKA Avatar answered Oct 18 '22 19:10

IKKA