fontWeight doesnt work when using fontFamily in react native

Question

I added Rubik-regular which is customFont to my folder :

const customFonts = {
  RubikRegular: require('./assets/fonts/Rubik-Regular.ttf'),
};

problem is that, if i use font like this :

               <Text style={{fontFamily: 'RubikRegular'}}>6453 </Text>

every this is fine. However, when i want to give fontWeight my text:

<Text style={{fontFamily: 'RubikRegular', fontWeight: 'bold'}}>6453 </Text>

fontWeight doesnt work. if i remove fontFamily then it works. what is the problem here i didnt understand

This might help you https://stackoverflow.com/questions/61032122/how-to-deal-with-custom-font-and-fontweight-with-react-native — dianaqqq, Feb 18 '21 at 09:33

score 1 · Accepted Answer · answered Feb 18 '21 at 09:46

1

You add Rubik-regular font, it means you only add regular (400) weight of Rubik font.

If you want to use fontWeight: 'bold', you have to add Rubik-bold font

answered Feb 18 '21 at 09:46

DinhNguyen

303
2
14

score -1 · Answer 2 · answered Feb 18 '21 at 09:35

you can do something like this

import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import SVG, { Path } from 'react-native-svg';

function ManBodySVG(props: Props) {
    const [defaultOpacity, setDefault] = useState(10);

    return (
        <View style={styles.manBodyContainer}>
            <View style={styles.frontBody}>
                <SVG xmlns="http://www.w3.org/2000/SVG" viewBox="0 0 303.08 958.84" height={height} width={width}>
                    <Path
                        d="M172.47,123c-7.65,0-17.12-4.25-23.9-17.81C138.24,84.51,133,50.37,134.47,41c3.46-21.93,18.08-41,38-41,20.31,0,34.25,15.69,39.26,37.19,2.15,9.25-1.7,45-13.63,68.17C191.34,118.51,178.5,123,172.47,123Z"
                        fillOpacity={`${(defaultOpacity / 100).toString()}`}
                        fill="black"
                    />
                    <Path
                        d="M162.83,153.88a2,2,0,0,0,1.91-2.54,97.07,97.07,0,0,0-8.5-20.07c-1.45-2.57-4.57-5.56-7.46-8.36A11.43,11.43,0,0,0,135.51,121c-11,5.77-31.38,16-45.4,20.78a43,43,0,0,0-8.79,4,2,2,0,0,0,.88,3.68c4.24.4,10.45.91,14.84,1,7.28.08,38.68-4.22,54.26,3.55C156.39,156.52,159.36,154,162.83,153.88Z"
                        fillOpacity={`${(dmgNeck / 100).toString()}`}
                        fill="black"
                    />
...

fontWeight doesnt work when using fontFamily in react native

2 Answers2