React Native and font variants

1
votes

I've created an React Native app, targeted mainly at iOS. I'm using custom fonts, and can see they are successfully integrated into the app via some debug in AppDelegate.m (in XCode):

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

resulting in:-

MyFontFamily

MyFontFamilyFontOne

MyFontFamilyFontTwo

My issue is accessing the specific fonts in a < Text > element - I always see the same font rendered when using the family or the exact font name, e.g.

<Text style={{fontFamily: 'MyFontFamily'}}>hello</Text>
<Text style={{fontFamily: 'MyFontFamilyFontOne'}}>hello</Text>
<Text style={{fontFamily: 'MyFontFamilyFontTwo'}}>hello</Text>

results in the same font rendered.

Outputting the same in HTML results in the desired outcome, e.g. fonts One and Two are different.

2
iosreactjsreact-nativefonts
If you use for example AmericanTypewriter-Light instead of your custom fonts does it run? – Mateo Guzmán

2 Answers

1
votes

As said by @Yanush verified you have properly linked your fonts. After with custom font you must set the fontFamily, the fontWeight and the fontStyle

0
votes

Make sure you have linked the fonts correctly. The correct way of linking fonts in react native is as described:

  1. Create a fonts dir under your project dir, eg: ./assets/fonts
  2. Edit package.json file and add these lines: "rnpm": { "assets": [ "./app/assets/fonts" ] }
  3. Link the fonts: in your project dir run "react-native link"