React Native – How to import font files?

1. Download font files

Source+Sans+Pro

2. Place your font files into your project

3. Create react-native.config.js

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

4. Link font files

• react-native >= 0.69

npx react-native-asset

• react-native < 0.69

npx react-native link

• Or you can use react-native-asset

yarn global add react-native-asset

react-native-asset

• Check installed fonts in iOS
  • Make sure they are displayed in info.plist
  • Make sure font files are copied into Resources folder
• Check installed fonts in Android
  • Make sure font files are copied into android/app/src/main/assets/fonts

4. Use font in code

Remember use them according to their file names.

<Text style={{fontFamily: 'SourceSansPro-Black' }}>SourceSansPro-Black</Text>
<Text style={{fontFamily: 'SourceSansPro-BlackItalic' }}>SourceSansPro-Black</Text>
<Text style={{fontFamily: 'SourceSansPro-Bold' }}>SourceSansPro-Black</Text>