I have followed all the procedures to add and use a custom font in my react native app but it is not working. Below is what I have followed.
Added assets/fonts under the root directory and added ttf fonts to it
Pic here
Created react-native.config.js and added the below code
module.exports = {
assets : ['./assets/fonts']
}
some sources said to add the below in package.json. Added it as well
"rnpm": {
"assets": ["./assets/fonts"]
}
Now, inside my component I am exactly using the same ttf name for font family style.
style= {styles.textStyles}
const styles = StyleSheet.create({
textStyles : {
fontFamily : 'Good Feeling Sans',
fontSize : 20,
fontWeight : 'bold',
margin : 10
} })
Ran "npx react-native link" and it was linked successfully
Linked Pic
7.Ran "npx react-native run-android" and I see no change in the font. :( Any idea why it does not reflect
Try to declare your font style without fontWeight parameter, so please try to declare your font style as:
const styles = StyleSheet.create({
textStyles : {
fontFamily : 'Good Feeling Sans',
fontSize : 20,
margin : 10
}
})
In stead of manipulating with fontWeight, you can use special prepared fonts for this (ttf files with weight variants). But if you really need the fontWeight you can try to declare it with number value, like in example: fontWeight:800
It was a problem with fontWeight I noticed in previous versions of React Native (< 0.60), maybe still present nowadays.
Make sure you also placed your font files in proper folder, accessible to your app. In your pic, assets/fonts is misplaced I believe, it should be placed under android/app/src/main/assets/fonts folder.
Just go to android folder and create android/app/src/main/assets/fonts
in that folder just drop your custom fonts.
Try this:
Rename the font file name to lowercase & Remove - from file name.
Run npx react-native link
Restart app npx react-native run-android
Related
I can't change mt app fontfamily. I'd tried so much things from searching in google. I want to change the fontfamily of the app fonts. please help.
below is my added fonts:
Below is the react-native.config.js:
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ["./assets/fonts/"], // stays the same
};
You are using expo project, You should use this package to load the fonts inside the project
expo install expo-font
I have made a Snack Example of "Sarpanch" custom font working
https://snack.expo.dev/DENUcVd2U
i want to add 'Open-sans' font to my App but i have an issue and it happens on IOS simulator only
here is my steps :
a) I've created a folder in root app as : assets then fonts fonts folder in assets and put Open-sans.ttf
b) I've made a file in root with the name react-native-config.js and add:
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./assets/fonts/'],
};
c) react-native link
d) In the App.js
<Text style={{fontFamily: 'OpenSans-Bold', fontWeight: 'bold'}}>
This is my first App
</Text>
My problem is it keeps telling me `Unrecognized font family' whenever i made any edit in the App.js
but when i open react-native-config.js and do nothing but save only the hot reload fired and the font is working
as i mentioned it's perfect on Android but the error appears on IOS when save after any edit on App.js file
For IOS the font-family value is fullname and for android its file name.
Try:
<Text style={{fontFamily: 'Open Sans Bold'}}>This is my first App</Text>
For Android, change the file name 'OpenSans-Bold.ttf' to 'Open Sans Bold.ttf'
I was with the same error, so thats what I did:
1 - Rename react-native-config.js to react-native.config.js and put this script on file:
module.exports = {
assets: ['./src/assets/fonts'], // this is my path
};
2 - put it on my package.json :
rnpm": {
"ios": {},
"android": {},
"assets": [
"./src/assets/font"// this is my path
]
},
and After I run react-native link && yarn react-native link.
Check if your info-plist and your android assets are changed
As per your description you have only put Open-sans.ttf in asset folder. But you are trying to access OpenSans-Bold which is not added to your asset folder. To get access to any particular font, you need to add that one to the asset folder. Here is an example for your referrence...
you can check this too for better understanding
How to add custom fonts in react-native 0.61.x. After 0.60+ added auto linking, I dont know how to link custom fonts.
When I execute this command:
react-native link
This make some aditional linking which generate extra error.
So how Can I Link only fonts folder.
create an assets folder in your project directory and then create a fonts folder and paste any custom fonts that you want then add this code snippet to the react-native.config.js file in the root of your project(if the file doesn't exist create it).
module.exports = {
project:{
ios: {},
android: {}
},
assets: ["./assets/fonts"]
}
after all run react-native link to link the resources to your project.
you will be able to use fonts now. for example, I have a yekan.ttf font in my fonts folder you can use it like this:
const styles = StyleSheet.create({
text: {
fontFamily: "yekan",
},
})
as you see use custom fonts without their extension I mean don't put for example .ttf at the end otherwise, it won't work.
create a file in root (react-native.config.js)
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ['./assets/fonts'], // stays the same
};
Create a folder called assets in root and paste the font file under fonts
folder(assets/fonts/xxxx.ttf)
Run npx react-native link in command line.
You can add custom font in react-native using expo-font.
Install >> expo install expo-font
import * as Font from 'expo-font'
loadFonts=async()=> {
await Font.loadAsync({
// Load a font `Montserrat` from a static resource
popinsmed: require('../../assets/fonts/DMSans-Regular.ttf'),
// Any string can be used as the fontFamily name. Here we use an object to provide more control
Montserrat-SemiBold': {
uri: require('../../assets/fonts/Poppins-Medium.ttf'),
display: Font.FontDisplay.FALLBACK,
},
});
this.setState({ fontsLoaded: true });
}
componentDidMount(){
this.loadFonts();
}
render(){
return(
<View><Text style={{fontFamily:"popinsmed"}}>This is a custom font</Text></View>
)
}
For reference, click here.
I want to know how to have different fonts for IOS and Android,
I have only 1 index file.(App.js)
My code that works on IOS:
<Text style={{fontFamily: 'AppleSDGothicNeo-Thin'}}>Hello!</Text>
But when I open the App on Android I see the standard font (Arial?)
I tried something like this:
<Text style={{fontFamily:'Roboto', fontFamily:'AppleSDGothicNeo-Thin'>Hello!</Text>
But this just gives me an Error that the font wasn't found.
You can use condition in your style using Platform component from React Native
import { Platform } from 'react-native';
<Text style={{fontFamily: (Platform.OS === 'ios') ? 'AppleSDGothicNeo-Thin' : 'Roboto'}}>Hello!</Text>
Also be sure fonts are well imported.
Otherwise import them with the following steps.
1 - Place the fonts you want to use in a directory inside your project. For example in ./assets/fonts/
2 - Add the following line in your package.json:
“rnpm”: {
“assets”: [“./assets/fonts”]
}
3 - run in terminal:
$ react-native link
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.
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:
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