react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

Multiple custom fonts not working

Open fpegios opened this issue 6 months ago • 3 comments

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.

fpegios avatar Jul 07 '25 13:07 fpegios

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"
    }
})

Andres6936 avatar Jul 24 '25 23:07 Andres6936

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

fpegios avatar Sep 19 '25 12:09 fpegios

Solved! The issue was related with the font files. After utilizing another font file, it is working properly. :)

fpegios avatar Sep 19 '25 12:09 fpegios