No difference between Thin & Light fontWeight on iOS when adding custom font to my react-native app

Question

I just added a custom font to my react-native app (https://fonts.google.com/specimen/Josefin+Sans).

JosefinSans-Bold.ttf
JosefinSans-BoldItalic.ttf
JosefinSans-Italic.ttf
JosefinSans-Light.ttf
JosefinSans-LightItalic.ttf
JosefinSans-Regular.ttf
JosefinSans-SemiBold.ttf
JosefinSans-SemiBoldItalic.ttf
JosefinSans-Thin.ttf
JosefinSans-ThinItalic.ttf

I linked the font files by running react-native link after adding

"rnpm": {
  "assets": [
    "path/to/my/font/files"
  ]
},

to my package.json

I then use the font in my app like so:

customFont: {
    fontFamily: 'Josefin Sans',
},
thin: {
    fontWeight: '100'
},
light: {
    fontWeight: '300'
},
semiBold: {
    fontWeight: '600'
},
bold: {
    fontWeight: '700'
},
italic: {
    fontStyle: 'italic'
},

iOS simulator screenshot of the different fontWeight and fontStyle

The problem is that there is no difference between the thin(fontWeight: '100') & the light(fontWeight: '300').

What I've tried so far:

• Tried with another font from google fonts (same problem).
• Tried to run the app on an actual device (rather than the simulator) but in vain.
• Tried to use iOS default font with those fontWeights: thin and light are really recognizable
• Displayed the font actual names (JosefinSans-Light and JosefinSans-Thin) in xcode with:

_

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

Has anybody had the same issue ? Any ideas on how to fix it and display the actual thin and light font weights ?

Thanks a lot

Answer 1

I believe you have to use a different fontFamily style for each weight when it comes to custom fonts.

So in this case, you would want something like this for your styles (names may be slightly off, but you get the idea):

customFont: {
    fontFamily: 'Josefin Sans'
},
thin: {
    fontFamily: 'Josefin Sans-Thin'
},
light: {
    fontFamily: 'Josefin Sans-Light'
},
semiBold: {
    fontFamily: 'Josefin Sans-SemiBold'
},
bold: {
    fontFamily: 'Josefin Sans-Bold'
},
italic: {
    fontFamily: 'Josefin Sans-Italic'
}

...

Of course, feel free to add additional styles as you deem fit. Also, you may want to change customFont to regular in light of this.