ReactNative - Issue with custom fonts

1
votes

I have added 4 custom fonts (including supported styles, e.g. bold, black, medium, etc) to my React Native project following the guide: https://blog.bam.tech/developper-news/add-a-custom-font-to-your-react-native-app

The fonts in question are:

  • Guardian Egyp
  • Guardian Sans
  • Guardian Sans Cond
  • Guardian Sans XCond

In iOS when I use the fontFamily style property on a <Text> component the following Space Cased family names work:

  • fontFamily: 'Guardian Egyp'
  • fontFamily: 'Guardian Sans'

Specifically the correct Regular style for that font is used.

However when I do the same for the following:

  • fontFamily: 'Guardian Sans Cond'
  • fontFamily: 'Guardian Sans XCond'

The wrong style of the font is used (it uses bold italic)

However if I use PascalCasing including the style:

  • fontFamily: 'GuardianSansCond-Regular'
  • fontFamily: 'GuardianSansXCond-Regular'

It works as expected.

Does anyone have any idea why in the case of the Cond and XCond font families the 'Space Cased' naming for the fontFamily does not work?

All the font families were imported into the RN project in the same way with the same naming conventions.

NOTE: using RN 0.53.0

1
iosreact-nativefonts
If you are using MAC, so check your installed fonts, there must be font description 1) font name 2) POST SCRIPT name, use the 2nd one and check. – Patrick R

1 Answers

0
votes

I had the same error on iOS and couldn't find the reason. It was a wrong name of the font! Check what are the exact names of your fonts. Add the font family and type separately. You can list your font names using this code in your AppDelegate.m file. Then check in the debugger:

xCode debugger screenshot

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