Debugging why specific font is not working in React Native

2
votes

I am currently using many different fonts. All of them are working except for one particular.

I added it in the same way as I added others which are working:

  1. Import the font into project
  2. Modify info.plist
  3. Find proper font family name (I did this by plugging NSLog inside RCTConvert)
  4. Use the font in react-native through CSS with fontFamily

Unfortunately I cannot share the font publicly, so I have to ask how would one debug this issue?

3
iosfontsreact-native

3 Answers

3
votes

One possible culprit is the font weight. I was trying to use a font with a weight of 325 at one point, but React Native seems to not allow the usage of a font unless the weight falls within their enum values (normal, bold, all hundreds within the range 100-900).

I used this app to modify the font weight of the file I was trying to use and set it to a standard 400: https://glyphsapp.com

2
votes

In AppDelegate.m, under NSURL *jsCodeLocation, paste the following code. This will log out all available fonts, including the new font(s) that you have added:

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

That way, you can get the exact font name to use in your app. The log output should look something like this:

enter image description here

0
votes

I needed the same solution, using Swift. Here is the script to print out the Font Familes, and Faces, in Swift (works in appDelegate)

let fontFamilies =  UIFont.familyNames()
    for  fontNames in fontFamilies{
      print(fontNames)
        let fontFace = UIFont.fontNamesForFamilyName(fontNames)
        for aName in fontFace{
            print("   \(aName)")
        }
    }[output of script][1]

link to part of log...http://www.zonesight.com/stackImages/font.png