Menu
I've managed to add a custom font by:
putting *.ttf files in ProjectName/android/app/src/main/assets/fonts/ like this:
and setting font family by fontFamily: "Open Sans"
But there are extra font weights I want to use like 'Semi Bold', 'Extra Bold'. I tried adding them as 'Open Sans_900.ttf' and setting fontWeight: 900 but that didn't work, it displayed bold version of the font.
Is there a way to add these additional font weights?
975
You can fetch your fonts from Google Fonts. In your React Native project src directory, you should create an assets directory. Here you'll have a directory for each kind of asset (SVG, Fonts, etc). Therefore, create a fonts directory and paste the fonts that you downloaded.
To set a global font family in React, set the font-family style on the html element in your index. css file and import the file in your index. js file. Global CSS should be imported in index.
Open your PageFly page and click on Add custom Code button Now you need to decide if you want to apply the custom font to the whole page or to the specific element.
The out of the box support for custom fonts on Android is a little limited in React Native. It does not support font weights other than normal and bold (it also supports the italic fontStyle). If you want other custom weights, you must add them as separate fonts with a different name (as David mentioned in his answer).
The only font files that RN will find are of the following format:
{fontFamilyName}{fontFamilyName}_bold{fontFamilyName}_italic{fontFamilyName}_bold_italicSupported extensions: .ttf and .otf
This really isn't documented anywhere (that I know of), but you can read the Font Manager code here: https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/views/text/ReactFontManager.java
94
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
