4

Problem

I have been searching the internet for a guide to using a custom font family in React Native (0.60+, no Expo). Currently all guides and answers seem outdated, incorrect, or incomplete. Specifically how do you implement a whole range of font weights and styles into a custom font (correctly using the fontWeight and fontStyle properties)?

Background

I expect that there is a solution which properly utilizes the fontWeight and fontStyle style props alongside fontFamily. However the solutions I've found do not do that. Some of them:

  1. This solution shows multiple font types. However it changes between bold and regular via the fontFamily style prop (changing the family between "Montserrat-Regular" & "Montserrat-Bold")
  2. This guide and StackOverflow answer both outline only referencing the font family's base name when using it (e.g. fontFamily: "Montserrat") and then choosing the desired weight and style via fontWeight and fontStyle. Testing with several fonts from google fonts (both as a .ttc and .ttf) does not yield results (at least not in Android). Both solutions are from years ago using rnpm which leads me to believe they are outdated.

So far I have not found an up to date solution which works as expected. Perhaps it's not possible but that does not make sense given the font system which is in place.

What I expect to happen

Given the style props:

 {
    fontStyle: "italic",
    fontWeight: "400",
    fontFamily: "Montserrat"
  }

I would get text in the Montserrat font, italicized, with weight 400. No attempts that I have tried so far do this. How can I?

What I have tried so far:

  • Using a react-native.config.js like this:
      project: {
          ios: {},
          android: {},
      },
      assets: ['./assets/fonts']
    }
    
    and react-native link, I've imported font files both as a set of .ttf and a merged .ttc, no luck there. With the .ttf, I had to change the fontFamily name to the file name, couldn't use weight and style. The .ttc didnt seem to work at all.
  • (Android specific) I've attempted to make a montserrat.xml file in android/app/src/main/res/font as per the spec on the Android Developers website, did not seem to produce anything.

I'm hitting a dead end with this. I dont quite understand why there is the bother with fontWeight and fontStyle style props if they cant even be used outside of the default fonts. Any help with this is appreciated, thanks.

Jonny
  • 285
  • 2
  • 11

0 Answers0