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/[email protected]
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.

[Rajat-Autofacets]

Hello @RiccardoRiggi & @coren-frankel,

Is there any other way to fix this issue. Because I tried this but it's not worked for me.

[coren-frankel]

See if some of the solutions in #2730 help you.

My use case is a bit different, I didn't override "@react-pdf/font": "2.4.4 but instead @react-pdf/layout": "3.11.5" which allowed me to get bold font with fontFamily like so:

const styles = StyleSheet.create({
  bold: { fontFamily: 'Helvetica-Bold' },
  fallbackImg: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: -1,
    maxHeight: '256px',
    borderRadius: '12px'
  },
  page: { padding: 10, fontFamily: 'Helvetica' },
  underline: { textDecoration: 'underline' },
});

With this, I was able to pass styles.bold to the style prop on a given element with success. I hope it helps.