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!

When I inspect the elements that are meant to use the font in the android debugger it says the element is using the font I want it to use. It's just not displaying in that font, just the default. — Jake K, Mar 02 '17 at 12:37
can you show the code where you have written your are using the font. — Nitesh Mishra, Mar 02 '17 at 12:56
@NiteshMishra `const fontVerv = 'VerveineCorp-Regular'` I then use it as `fontFamily: fontVerv` — Jake K, Mar 02 '17 at 13:00
@kate pdid you try this link https://kylealwyn.com/blog/custom-fonts-with-react-native — Nitesh Mishra, Mar 02 '17 at 13:06

score 4 · Answer 1 · answered Nov 11 '18 at 00:45

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',
      },

score 3 · Accepted Answer · answered Mar 02 '17 at 13:08

3

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.

answered Mar 02 '17 at 13:08

arjun

3,514
4
27
48

Are these files in the root of your project? – Jake K Mar 02 '17 at 13:34
my directory structure is like **src/modules/mymodule/sytles/..** – arjun Mar 02 '17 at 13:50

score 3 · Answer 3 · answered Jan 10 '21 at 11:30

Guys if you are following all other solution and still no update then try following the steps

add react-native-config.js file
then add fonts in assets/fonts/your font
rename it with lowercase like OpenSans_Regular to opensans_regular
react-native link in terminal in your project folder
after all build your project again using react-native run-android
fontFamily: Platform.OS === "ios" ? 'opensans_regular' : 'cassandrapersonaluseregular_3bjg',

I was also getting the same issue the font was not reflecting changes then I build my project again that was my mistake because we adding fonts in our android folder so we need to compile that again. I hope someone may save their time

Great idea to rebuild the app. That's what solved it for me. Thirty minutes, wasted... — I Stand With Israel, May 20 '21 at 16:54

score 2 · Answer 4 · answered Mar 02 '17 at 12:32

2

I added font in react-native android from here:

https://medium.com/@gattermeier/custom-fonts-in-react-native-for-android-b8a331a7d2a7#.40vw3ooar

Follow all the steps it will work fine.

After adding run react-native run-android

answered Mar 02 '17 at 12:32

Ankush Rishi

2,861
8
27
59

I followed the same tutorial but to no aveil – Jake K Mar 02 '17 at 12:37
@JakeK try doing react-native run-android after other steps – Jan 10 '21 at 11:21

score 1 · Answer 5 · answered Mar 02 '17 at 12:23

1

First, make sure you are up to version 0.16+ with react-native.
Your fonts should be *.ttf or *.otf files and must be located in: /projectname/android/app/src/main/assets/fonts
Make sure the fonts are lowercase only and follow this pattern: fontname.ttf, fontname_bold.ttf, fontname_light.ttf, fontname_bold_italic.ttf

answered Mar 02 '17 at 12:23

Nitesh Mishra

574
1
6
14

Tried all of these :( The fonts were in uppercase, but I have changed them to lowercase.. still no luck. – Jake K Mar 02 '17 at 12:37
Where are you quoting this from? – Dominic Jul 01 '22 at 14:34

score 1 · Answer 6 · edited May 23 '17 at 10:29

1

Have you defined another font in your AppTheme (styles.xml), that overrides your preferred font?

Have you tested your font with a "Hello World"-App as a minimal test?

Have you implemented your ttf as shown here for example?: How to use custom font in Android Studio

edited May 23 '17 at 10:29

Community

1
1

answered Mar 02 '17 at 12:27

tigercode

67
7

Yep, I have just tried all these but nothing. When I inspect the element in the android debugger, it says the element is using the font I want it to. But the element is still displaying as the default font. – Jake K Mar 02 '17 at 12:38

Android react-native app not picking up font

6 Answers6