Font not working

[Rajat-Autofacets]

I am experiencing an issue with [@react-pdf/renderer] where the font-weight property is not being applied correctly when generating PDFs. Despite specifying a font weight in the code, the output does not reflect this change. This issue is triggered for only a specific font family.

"@react-pdf/renderer": "^3.4.4", "react": "^18.3.1",

// ===== Register Fonts =====

Font.register({ family: 'working-family' fonts: [ { src: 'path', format: 'woff', fontWeight: 'normal', fontStyle: 'normal' }, { src: 'path', format: 'woff', fontWeight: 'bold', fontStyle: 'normal' }, ], });

Font.register({ family: 'not-working-family', fonts: [ { src: 'path', format: 'woff', fontWeight: 'normal', fontStyle: 'normal' }, { src: 'path', format: 'woff', fontWeight: 'bold', fontStyle: 'normal' }, ], });

const DemoDocument = () => {

return (
    <Document>
        <Page size="A4">
            <Text style={styles.boldText}>This is Text Bold.</Text>
            <Text style={styles.normalText}>This is Text Regular.</Text>
        </Page>
    </Document>
)

}

export default DemoDocument;

[Rajat-Autofacets]

@diegomura Could you help me on this? I am trying to fix this from last 2 days.

[RiccardoRiggi]

Hello Rajat-Autofacets,

I solved with this temporary fix

"@react-pdf/font": { "version": "2.4.4", "resolved": "https://registry.npmjs.org/@react-pdf/font/-/font-2.4.4.tgz", "integrity": "sha512-yjK5eSY+LcbxS0m+sOYln8GdgIbUgti4xjwf14kx8OSsOMJQJyHFALHMh2cLcKJR9yZeqVDo1FwCsY6gw1yCkg==", "requires": { "@babel/runtime": "^7.20.13", "@react-pdf/types": "^2.4.1", "cross-fetch": "^3.1.5", "fontkit": "^2.0.2", "is-url": "^1.2.4" } },

You need to fix this dependency inside your package.json. This code is from package-lock.json

Let's hope it gets resolved soon Have a nice day

[Rajat-Autofacets]

Hi @RiccardoRiggi,

Thank you so much for your quick response and for providing the solution!

I tried installing the **@react-pdf/font** package using the command: npm i @react-pdf/font@2.4.4 Unfortunately, it didn’t work as expected.

I attached image to show the result after install the package.

Could you please help me troubleshoot this further or suggest any other steps I might try?

Thanks again for your support!

[Rajat-Autofacets]

Here I am providing some more information to understand the situation. Image-1 Image-2

In above images I tried to register the multiple custom fonts and component of the pdf content. In below images the output of the pdf where image-3 & image-4 we can see the issue with the font-1 Image-3

Image-4

In Image 3&4 I change the sequence and result is different.

[RiccardoRiggi]

Try this in package.json:

"overrides": { --   | "@react-pdf/font": "2.4.4",   | },

You need to override dependency used by react-pdf

[Rajat-Autofacets]

@RiccardoRiggi, It's not working.

"@react-pdf/font": "2.4.4", "@react-pdf/renderer": "^3.4.4", "react": "^18.3.1",

[coren-frankel]

@RiccardoRiggi, It's not working.

"@react-pdf/font": "2.4.4", "@react-pdf/renderer": "^3.4.4", "react": "^18.3.1",

@Rajat-Autofacets make sure you're placing "@react-pdf/font": "2.4.4" in your package.json overrides, not in dependencies.

Per the npm documentation:

Overrides provide a way to replace a package in your dependency tree with another version, or another package entirely.

[Rajat-Autofacets]

Thank you for your response. I apologise for the misunderstanding. I have placed "@react-pdf/font": "2.4.4" in the overrides section of the package.json file as advised, but unfortunately, the issue persists.

Could you please provide further guidance or suggestions on how to resolve this?

@RiccardoRiggi & @coren-frankel

[RiccardoRiggi]

Hi @Rajat-Autofacets Are you sure you then deleted the node modules folder and did a new clean install of the dependencies?

Do an npm ci and check the actual version of the font library in the folder

Have a nice day

[Rajat-Autofacets]

Yes, I removed the node_modules and package.lock.json and then make the changes in package.json file and run the npm i command.