Typo in Ios react native unrecognized

Question

I add my folder "font" on my assets, then i link my typo on Xcode (copy bundle and build phases of my project)

I create a js page and i add :

module.exports = {
  assets: ['./assets/font'],
};

i do npx react native link but when i lunch my project i have the error "unrecognized font family Ambit-Black"

Did i missed something ?

Could you please use the font name instead of the of file name fontFamily: 'Ambit'? — DAVID _

DAVID _ DAVID _ · Accepted Answer · 2020-11-16T15:30:15

I usually use the next pattern:

for iOS fontWeight+fontFamily
but for Android fontFamily is a filename of font

export const fonts = {
  semibold: Platform.select({
    ios: { fontWeight: '600', fontFamily: 'Graphik LC' },
    android: { fontFamily: 'Graphik LC_semibold' },
  }),
  bold: Platform.select({
    ios: { fontWeight: '700', fontFamily: 'Graphik LC' },
    android: { fontFamily: 'Graphik LC_bold' },
  }),
  normal: Platform.select({
    ios: { fontWeight: '400', fontFamily: 'Graphik LC' },
    android: { fontFamily: 'Graphik LC' },
  }),
};


<Text style={styles.text}>Test<Text/>

//...

const styles = StyleSheet.create({
  text: {
    ...fonts.semibold,
    fontSize: 14,
  },
});

FS:

assets/fonts
├── Graphik LC_bold.otf
├── Graphik LC.otf
└── Graphik LC_semibold.otf

Typo in Ios react native unrecognized

1 Answers