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

Custom fonts don't render in Adobe Acrobat reader when using Node.js rendering #2680

Closed
EvHaus opened this issue Mar 18, 2024 · 5 comments
Closed

Comments

@EvHaus
Copy link

EvHaus commented Mar 18, 2024

Describe the bug

When rendering via Node.js and renderToStream, I can't seem to get any custom TTF fonts to work in Adobe Acrobat in the generated PDF. They work just fine in Chrome, Safari and other PDF viewers though.

Interestingly, I cannot reproduce this using the REPL (which I believe doesn't browser rendering).

To Reproduce

Here is a sample PDF file that I generated. Try openening it in Chrome (it will work) and then in Adobe Acrobat (it will fail) with errors.

sample.pdf

The code for this file is:

import { Document, Page, StyleSheet, Text, renderToStream } from '@react-pdf/renderer';

Font.register({
  family: 'Oswald',
  src: 'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf'
});

const styles = StyleSheet.create({
	main: {
		fontFamily: 'Oswald',
	},
});

const Sample = () => (
	<Document>
		<Page size='LETTER' style={styles.main}>
			<Text>This text works in Chrome but fails in Adobe Reader</Text>
		</Page>
	</Document>
);

const stream = await renderToStream(React.createElement(Sample));

return new Response(stream, {
	status: 200,
	headers: {
		'Content-Disposition': `inline;filename="myfile.pdf"`,
		'Content-Type': 'application/pdf',
	},
});

Expected behavior

A PDF with text that renders in Adobe Acrobat.

Screenshots

This error shows on the first page

image

And then this one shows up after scrolling additional pages

image

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: N/A (Node.js)
  • React-pdf version: 3.4.0
@cduff
Copy link

cduff commented Mar 18, 2024

Duplicate of #2675?

@EvHaus
Copy link
Author

EvHaus commented Mar 18, 2024

Unfortunately no. I'm using restructure version 3.0.0 and my issue still persists. :(

@PelosiTech
Copy link

PelosiTech commented Mar 18, 2024

Hi @EvHaus

Add this to your overrides/resolutions

"resolutions": { "@react-pdf/layout": "3.6.4", "@react-pdf/textkit": "4.3.0", "@react-pdf/image": "2.2.2", "@react-pdf/pdfkit": "3.1.2", "restructure": "3.0.0" }

We had the same issues, having these fixed all of them. But we did have this exact issue, where they would not open up in Adobe. This fixed it.

@EvHaus
Copy link
Author

EvHaus commented Mar 19, 2024

Thanks for sharing @PelosiTech. Unfortunately those resolutions do not resolve this specific problem. Those resolutions fix diegomura/jay-peg#4 and #578 but does not fix this font problem.

@EvHaus EvHaus closed this as completed Mar 29, 2024
@EvHaus EvHaus reopened this Mar 29, 2024
@EvHaus
Copy link
Author

EvHaus commented Sep 23, 2024

Seems like this is working for me now as of @react-pdf/renderer@3.4.5. Closing.

@EvHaus EvHaus closed this as completed Sep 23, 2024
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

3 participants