Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font not working #2862

Closed
Rajat-Autofacets opened this issue Sep 6, 2024 · 13 comments
Closed

Font not working #2862

Rajat-Autofacets opened this issue Sep 6, 2024 · 13 comments

Comments

@Rajat-Autofacets
Copy link

Rajat-Autofacets commented Sep 6, 2024

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
Copy link
Author

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

@RiccardoRiggi
Copy link

RiccardoRiggi commented Sep 11, 2024

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
Copy link
Author

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.

image

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
Copy link
Author

Rajat-Autofacets commented Sep 11, 2024

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

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

Image-4
image

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

@RiccardoRiggi
Copy link

RiccardoRiggi commented Sep 11, 2024

Try this in package.json:

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

You need to override dependency used by react-pdf

@Rajat-Autofacets
Copy link
Author

@RiccardoRiggi, It's not working.

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

@coren-frankel
Copy link
Contributor

@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
Copy link
Author

Rajat-Autofacets commented Sep 12, 2024

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
Copy link

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
Copy link
Author

Rajat-Autofacets commented Sep 12, 2024

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
Copy link
Author

Rajat-Autofacets commented Sep 18, 2024

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
Copy link
Contributor

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.

@diegomura
Copy link
Owner

Should be fixed in latest version. Please re-open if it's not the case

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants