CODEWITHSUNDEEP
react-nativefonts
giliev
giliev

Reputation: 3058

Add font weight to custom added font in react-native

I added 2 fonts in React Native app. The one is: MyFont-Regular and the other is MyFont-Bold. I can use them with fontFamily: 'MyFont-Regular' and fontFamily: 'MyFont-Bold'. However, I would like to use the Regular font as fontFamily: 'MyFont' and the bold as style: {fontFamily: 'MyFont', fontWeight: 'bold'. Is there some workaround?

I added the fonts as assets using

"rnpm": { "assets": ["some_path/fonts"] }

in my package.json file.

Upvotes: 2

Views: 1300

Answers (1)

Pic
Pic

Reputation: 139

STEP 1: Assuming you have an ./assets/fonts/ folder, just name your font file MyFont.

STEP 2: Then, add this code to your ./package.json:

“rnpm”: {
   “assets”: [“./assets/fonts”]
}

STEP 3: Run in terminal:

$ react-native link

You should then see something like this:

enter image description here

If you want to make it bold, you can style it such as: fontWeight: 'bold' OR fontWeight: 700

UPDATE: Knowing that the font we're talking about is Pensum Pro, it is not possible to use the same font file for multiple font weights.

edit#1: typo

edit#2: added info

Upvotes: 1

Related Questions