Unrecognized font family w React Native 62 on iOS only

Question

Android is working fine - I have a Text component <Text style={styles.orText}>{'HELLO'}</Text> and style with fontFamily: 'SourceSansPro-SemiboldItalic' defined. On iOS I get the error [error][tid:com.facebook.react.ShadowQueue][RCTFont.mm:316] Unrecognized font family 'SourceSansPro-SemiboldItalic'.

If I change that style to SourceSansPro-Semibold on iOS I get no error but the text does not render at all. And I have a Button component from rn-elements that renders 'SourceSansPro-Semibold' correctly.

I have all the font .ttf files added to my project, they are all in Copy Bundle Resources as well as added to Info.plist under Fonts Provided by Application. Have done multiple build cleans and also tried switching to Legacy Build System. I'm running the app from Xcode but I've also tried running react-native run-is and get same font error. I have code running in App Delegate to report the fonts and it shows truncated names for anything Italic:

2020-05-26 10:57:35.426495+0200[97197:8029221] Source Sans Pro
2020-05-26 10:57:35.426871+0200[97197:8029221]  SourceSansPro-BlackIt
2020-05-26 10:57:35.427183+0200[97197:8029221]  SourceSansPro-SemiboldIt
2020-05-26 10:57:35.427585+0200[97197:8029221]  SourceSansPro-LightIt
2020-05-26 10:57:35.427993+0200[97197:8029221]  SourceSansPro-BoldIt
2020-05-26 10:57:35.428413+0200[97197:8029221]  SourceSansPro-Light
2020-05-26 10:57:35.428764+0200[97197:8029221]  SourceSansPro-ExtraLightIt
2020-05-26 10:57:35.429126+0200[97197:8029221]  SourceSansPro-Regular
2020-05-26 10:57:35.429549+0200[97197:8029221]  SourceSansPro-It
2020-05-26 10:57:35.429852+0200[97197:8029221]  SourceSansPro-ExtraLight
2020-05-26 10:57:35.430232+0200[97197:8029221]  SourceSansPro-Bold
2020-05-26 10:57:35.430571+0200[97197:8029221]  SourceSansPro-Semibold
2020-05-26 10:57:35.430948+0200[97197:8029221]  SourceSansPro-Black
2020-05-26 10:57:44.341 [error][tid:com.facebook.react.ShadowQueue][RCTFont.mm:316] Unrecognized font family 'SourceSansPro'
2020-05-26 10:58:11.447 [error][tid:com.facebook.react.ShadowQueue][RCTFont.mm:316] Unrecognized font family 'SourceSansPro'
2020-05-26 11:00:43.704 [error][tid:com.facebook.react.ShadowQueue][RCTFont.mm:316] Unrecognized font family 'SourceSansPro-SemiboldItalic'
2020-05-26 11:00:47.150 [error][tid:com.facebook.react.ShadowQueue][RCTFont.mm:316] Unrecognized font family 'SourceSansPro-SemiboldItalic'

Any ideas?? Xcode 11.4.1 with RN 62.2. Happens on device as well as simulator. TIA

abdelrhman abdelrhman · Accepted Answer · 2020-05-26T10:01:35

1-ensure you use the same font name (android will not give you an error if you write a wrong font name)

2-run npx react-native link

3- if you still get the same error in ios you can follow this link to link fonts manually in ios

Link Custom Fonts Manually for iOS

4- for "SourceSansPro-Semibold" remove the other text style you will find the text appears

Unrecognized font family w React Native 62 on iOS only

1 Answers