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

[EvHaus]

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

And then this one shows up after scrolling additional pages

Desktop (please complete the following information):

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

[cduff]

Duplicate of https://github.com/diegomura/react-pdf/issues/2675?

[EvHaus]

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

[PelosiTech]

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]

Thanks for sharing @PelosiTech. Unfortunately those resolutions do not resolve this specific problem. Those resolutions fix https://github.com/diegomura/jay-peg/issues/4 and https://github.com/diegomura/react-pdf/issues/578 but does not fix this font problem.