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:
- 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"
) - 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 viafontWeight
andfontStyle
. 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 usingrnpm
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:
andproject: { ios: {}, android: {}, }, assets: ['./assets/fonts'] }
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 inandroid/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.