Android react-native app not picking up font

Question

I am trying to use a font "Verveine Corp Regular' inside my react-native app.

The font works in the iOS build, but not in the Android build.

The font is in .tff format and is placed in the root of my work (linked in the package.json and I have run react-native link) and inside "android/gradle/src/main/assets/fonts" but it's still not picking the font up. I have also cleaned and rebuilt the app multiple times.

When inspecting an element which uses the font in the android debugger, it says it's using the font. But the font is still the default font.

Could anyone offer some help or guidance on this issue?

Thanks!

Answer 1

The other answers helped me get this working for me, thank you. This manuever is probably only necessary when the font has capital letters in the filename. A more complete answer:

Add the font as normal in react native, for example:

{react-native-project}/fonts/GovtAgentBB.ttf

Run react-native link and this will put the font in

{react-native-project}/android/app/src/main/assets/fonts/GovtAgentBB.ttf

{react-native-project}/android/app/src/main/assets/fonts/GovtAgentBB_ital.ttf

But android, bring robotic and not human, doesn't like this. So rename the file with all lower case letters and an underscore before the variant, like:

{react-native-project}/android/app/src/main/assets/fonts/govtagentbb.ttf

{react-native-project}/android/app/src/main/assets/fonts/govtagentbb_ital.ttf

Then, you have to change the font name in the style depending on the platform. For iOS, use the human name that is the name of the font that would be displaying in the title of the window of the Mac Font menu (or just the name you see on the web). For android, you have to, robotically, use the name of the file you just renamed.

      {Platform.OS === 'ios' ? (
        <Text style={styles.welcome}>
          Hello World!
        </Text>
      ) : (
        <Text style={styles.welcomeAndroid}>
          Hello World
        </Text>
      )}
      const styles = StyleSheet.create({
      ...
      welcome: {
          fontFamily: 'Government Agent BB',
      },
      welcomeAndroid: {
          fontFamily: 'govtagentbb',
      },

Answer 2

This is how I used custom font in my project

//sampleStyle.js
import overrideStyles from '/sampleoverridestyles';
iconTextStyle: {
  color: '#FFFFFF',
  fontSize: 16
}

//sampleoverridestyles.ios.js
export default {
  iconTextStyle: {
    fontFamily: 'FaktSoftPro-Medium'
  }
}

//sampleoverridestyles.android.js
export default {
  iconTextStyle: {
    fontFamily: 'faktsoftpro_medium'
  }
}

since I cannot set the font name same for iOS and android I have overridden it as above and it worked.