2

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.

giliev
  • 2,938
  • 4
  • 27
  • 47

1 Answers1

1

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

Pic
  • 139
  • 1
  • 8
  • If it doesn't work out for you, comment and I'll try to help. – Pic Jul 17 '17 at 11:56
  • I tried fontFamily: 'MyFont-Regular', fontWeight: 'bold', but it didn't work out. Will try to remove the Regular part and see if that works out. – giliev Jul 17 '17 at 12:00
  • Which font is it? Because some fonts do not support various weights, i.e. said font may only have 500 support, or 700, etc. – Pic Jul 17 '17 at 12:02
  • I use PensumPro – giliev Jul 17 '17 at 12:07
  • It is really beautiful. Unfortunately, it is sold separately. Each font file yields one font weight only. What fontWeight does is calling the corresponding font member contained in the font file. – Pic Jul 17 '17 at 12:21
  • How can I check which fonts support which weights/styles? Is it possible to print the available options with console.log(...) in react-native? – giliev Jul 17 '17 at 12:24
  • I do not believe that is possible, nor is it necessary. You can google it and check each font's website. [Pensum Pro](https://www.myfonts.com/fonts/typemates/pensum-pro/) – Pic Jul 17 '17 at 12:27
  • In my case I do have the bold version, but I would like to use it as a fontWeight, not as a separate fontFamily. Is that possible? – giliev Jul 17 '17 at 12:34
  • It might be possible, but that would take a font editing tool. I might have found a workaround in this other question: [LINK](https://stackoverflow.com/questions/2436749/how-to-add-multiple-font-files-for-the-same-font) – Pic Jul 18 '17 at 13:34