Multiple custom fonts not working
Describe the bug I am following the documentation to register two fonts, but only the one can be utilized.
Here is the code:
`Font.register({ family: 'TeleNeoWeb-Regular', src: '/assets/fonts/TeleNeoWeb-Regular-font.woff', }) Font.register({ family: 'TeleNeoWeb-Bold', src: '/assets/fonts/TeleNeoWeb-Bold-font.woff', })
const globalStyles = StyleSheet.create({ h1: { fontFamily: 'TeleNeoWeb-Regular', }, h2: { fontFamily: 'TeleNeoWeb-Bold', } }) `
The Regular font is shown on both h1 and h2. It seems that multiple custom fonts can not be rendered.
You need to be more specific when recording font variation.
Font.register({
family: 'TeleNeoWeb',
fonts: [
{
src: '/assets/fonts/TeleNeoWeb-Regular-font.woff',
fontWeight: "normal"
},
{
src: '/assets/fonts/TeleNeoWeb-Bold-font.woff',
fontWeight: "bold"
}
]
})
const globalStyles = StyleSheet.create({
h1: {
fontFamily: 'TeleNeoWeb',
},
h2: {
fontFamily: 'TeleNeoWeb',
fontWeight: "bold"
}
})
After following your suggestion I still can not see the two different fonts in the rendered PDF.
This is my code:
`Font.register({ family: 'TeleNeoWeb', fonts: [ { src: '/assets/fonts/TeleNeoWeb-Regular-font.woff', fontWeight: 'normal', }, { src: '/assets/fonts/TeleNeoWeb-Bold-font.woff', fontWeight: 'bold', }, ], })
const globalStyles = StyleSheet.create({ h1: { fontFamily: 'TeleNeoWeb', fontWeight: 'bold', }, h2: { fontFamily: 'TeleNeoWeb', fontWeight: 'normal', }, })`
The issue starts appearing when using more than one fonts. For instance, if I register only one of these fonts, everything is working properly.
Do you know any solution to that?
Thanks in advance
Solved! The issue was related with the font files. After utilizing another font file, it is working properly. :)