custom font in react native

4
votes

I try using custom font in react native app , create assets/fonts/ folder in root of project and put fonts in there. create react-native.config.js and write ,

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/fonts/'],
};

and try react-native link it is working in android but not working in ios

react-native: 0.60.5
npm: 6.11.0
node: 10.16.0
2
iosreact-nativefonts
What exactly are you exporting inside project? Have you tried rebuilding the project? – Rohit Kashyap
This might help: github.com/facebook/react-native/issues/17641 – Rohit Kashyap

2 Answers

0
votes

Android will use the font name but in IOS it will use the “PostScript name(Please check may be this is the issue)”.

Suppose you have a font "SFUIDisplayBold.otf" . You have link the font . It will work in Android but not in IOS . Because PostScript name of font is“SFUIDisplay-Bold.otf” so for IOS you have to use "SFUIDisplay-Bold.otf" despite the fact that we have added font with name "SFUIDisplayBold.otf". (See Details)

You can see the PostScript name of fonts in font book

enter image description here

0
votes

Custom fonts are not bundled automatically for IOS. You need to link them for IOS manually.

A detailed instruction can be found at Custom Fonts in React Native for iOS & Android Builds

The last step was the key for me to make this work. Make sure you use the PostScript name of the font when adding fontFamily to your style.