CODEWITHSUNDEEP
iosfontsreact-nativecustom-font
guitoof
guitoof

Reputation: 955

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

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:

_

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

Upvotes: 6

Views: 1637

Answers (1)

TheJizel
TheJizel

Reputation: 1900

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.

Upvotes: 3

Related Questions