I am trying to use the custom font called times-news-roman.
I created react-native.config.js file, here is what's inside of it
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: ['./assets/fonts/'], // stays the same
};
I also created my assets folder in the root of the app.
I am trying to use this custom font like this:
headerTextLight: {
color: 'black',
fontWeight: 'bold',
fontSize: 30,
paddingLeft: 10,
paddingTop: 10,
fontFamily: 'times-new-roman',
},
But I am getting this error:
Unrecognized font family 'times-new-roman'
I am using "react-native": "^0.63.3". Any suggestions please?
Check that your fonts are included in your bundled resources within the Build Phases section
Add your fonts to the Info.plist
Within your project folder navigate to the Info.plist file where you will want to add your fonts. Hover on the last line in the list and click on the plus sign to add a new line. Select the option “Fonts provided by application.” Now you will add all your fonts and make sure the string is EXACTLY THE SAME as the font file (.otf, .ttf) name.
Related
I am trying to Convert some HTML to PDF using PDFMake and htmlToPdfMake in my Vue Project. By default PDFMake only supports Roboto but i wanted to add some custom fonts so I added the Font Files (.ttf) to ./examples/fonts in the PDFMake folder inside ./node_modules. I then used the node build-vfs.js "./examples/fonts" command and compiled a new vfs-fonts.js file. This here is my code.
import pdfMake from "pdfmake/build/pdfmake.js";
import pdfFonts from "pdfmake/build/vfs_fonts.js";
pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.pdfMake.vfs = pdfFonts.pdfMake.vfs;
const toPdf = document.getElementById("final").innerHTML;
const html = htmlToPdfmake(toPdf);
pdfMake.fonts = {
AbrilFatface: {
normal: "../assets/fonts/AbrilFatface-Regular.ttf",
bold: "../assets/fonts/AbrilFatface-Medium.ttf",
italics: "../assets/fonts/AbrilFatface-Italic.ttf",
bolditalics: "../assets/fonts/AbrilFatface-MediumItalic.ttf",
},
Montserrat: {
normal: "../assets/fonts/Montserrat-Regular.ttf",
bold: "../assets/fonts/Montserrat-Medium.ttf",
italics: "../assets/fonts/Montserrat-Italic.ttf",
bolditalics: "../assets/fonts/Montserrat-MediumItalic.ttf",
},
};
const result = pdfMake.createPdf({
styles: {
alignment: "center",
},
pageSize: {
width: 900,
height: 700,
},
pageOrientation: "landscape",
pages: 2,
content: [html],
});
result.getBase64((data) => {
this.setPdf({
pdf: data,
});
});
As you can see, I have manually set the pdfMake window object, also included the pdfMake and vfs-fonts js files and also provided a pdfMake.fonts object. Even after all this, this error appears:
I have no idea why it doesn't work. Please Help.
OP solved the issue by bringing the fonts into the same directory as the code using it (rather than node_modules).
Nothing should really be added there anyway since it's volatile and usually not accessible on a production server.
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
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 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