react-nativefonts

React native custom font in 700 not working


I use Quicksand as custom font in react-native version 0.73.5. When I give all fonts, the values work. When font weight is set to 600 it works and i can give bold font if i want. But when font weight is 700 custom font doesn't work.

    <Text
      style={{
        color: STATIC_COLORS.WHITE,
        fontSize: 20,
        fontFamily: 'Quicksand-Bold',
        fontWeight: '700',
      }}>
      font test - don't work
    </Text>

An example like below works but I do not use react native text component directly in my project. I create my own component with text and use it. Font family is given in it. Font family is not given in every text component. It is assigned only in the custom text component. When using this custom text component, we only adjust with weight. I cannot change this operation.

    <Text
      style={{
        color: STATIC_COLORS.WHITE,
        fontSize: 20,
        fontFamily: 'Quicksand-Bold',
        fontWeight: '600',
      }}>
      font test - work
    </Text>

In my custom text component, an assignment is made in this way.

'600': FONT_FAMILY.SEMIBOLD,
'700': FONT_FAMILY.BOLD,

If I give '700' as weight it will take the bold font but it doesn't work. I am sure I added the fonts properly. The bold example above works. As I said, I cannot get the bold value with the custom font only when 700 is given as weight.


Solution

  • I found the solution but I don't have detailed information about why. I created the directory android/app/src/main/res/font and added the fonts' .otf files renamed with lowercase letters. I also created an .xml file called font.

    <?xml version="1.0" encoding="utf-8"?>
    <font-family xmlns:app="http://schemas.android.com/apk/res-auto">
        <!--<font app:fontStyle="normal" app:fontWeight="300" app:font="@font/quicksand_light" />
        <font app:fontStyle="normal" app:fontWeight="400" app:font="@font/quicksand_regular" />
        <font app:fontStyle="normal" app:fontWeight="500" app:font="@font/quicksand_medium" />
        <font app:fontStyle="normal" app:fontWeight="600" app:font="@font/quicksand_semibold" />-->
        <font app:fontStyle="normal" app:fontWeight="700" app:font="@font/quicksand_bold" />
    </font-family>
    

    It got better when I added them, of course I only added the 700 one, the others were fine. also, although I don't show the code completely here, I assign fonts with font weight in my text component. so 700 will actually always be equal to bold font.