No difference between Thin & Light fontWeight on iOS when adding custom font to my app depending on reaction

Question

I just added a custom font to my responsive application ( 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

Then I use the font in my application like this:

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

iOS screenshot for different fonts and Style font

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

What I have tried so far:

• Tried with a different font from google fonts (same problem).
• I tried to run the application on a real device (and not in a simulator), but in vain.
• Tried to use iOS default font with these fontWeights: thin and light really recognizable
• The actual font names ( JosefinSans-Light and JosefinSans-Thin ) are displayed in xcode using:

_

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

Has anyone had the same problem? Any ideas on how to fix this and display real thin and light font fonts?

thanks a lot

Answer 1

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

So, in this case, you will need something similar 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 wish. Alternatively, you can change customFont to regular in the light of this.