diegomura / diegomura/react-pdf

Custom fonts break PDFs when viewed in Adobe Reader

Open
#2,429 5 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Description**
When using (some?) custom fonts, the contents of the PDF file will not show up at all when viewed in Adobe Reader.
I know this sounds like a possible issue with the library you use for rendering fonts, but I thought it's best to start here.

**To Reproduce**
I've created this minimalistic example:

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

import bodoniModa from '@fontsource/bodoni-moda/files/bodoni-moda-latin-400-normal.woff';
import lato from '@fontsource/lato/files/lato-latin-400-normal.woff';
import sourceSansPro from '@fontsource/source-sans-pro/files/source-sans-pro-cyrillic-400-normal.woff';

const OUT_DIR = `${import.meta.dir}/../out`;

Font.register({ family: 'Bodoni Moda', src: bodoniModa });
Font.register({ family: 'Lato', src: lato });
Font.register({ family: 'Source Sans Pro', src: sourceSansPro });

const styles = StyleSheet.create({
section: {
margin: '16px'
},
bodoniModa: {
fontFamily: 'Bodoni Moda'
},
lato: {
fontFamily: 'Lato'
},
sourceSansPro: {
fontFamily: 'Source Sans Pro'
},
helvetica: {
fontFamily: 'Helvetica'
}
});

const text =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed leo ornare, finibus nisi sit amet, egestas enim. Proin posuere augue ut turpis sodales, eget eleifend lectus consectetur.';

const Doc = () => (




Helvetica
{text}




Bodoni Moda
{text}




Lato
{text}



Source Sans Pro
{text}




Helvetica
{text}




);

const generateDoc = async () => {
return pdf().toBlob();
};

const blob = await generateDoc();

Bun.write(`${OUT_DIR}/${new Date().toISOString()}.pdf`, blob);
```

**Expected behavior**
I'd expect all the content showing up, with the correct font families in Adobe Reader as well, just like it happens in every other tool I used (mostly browsers and Preview on mac os).
What actually happens is that anything after the 3rd party font is omitted (visually, at least), and I _sometimes_ get an error from Adobe (attached below).

**Screenshots**
On the left, you'll see the file opened in the built-in Preview app, on the right, opened in Adobe Reader.
image

![image](https://github.com/diegomura/react-pdf/assets/6561508/473fa98c-bcb5-41ef-9693-6a00339197e3)

**Desktop (please complete the following information):**
- OS: Adobe Reader on both MacOS (v 2023.006.20360) and Windows (v 2023.006.20320)
- React-pdf version 3.1.13

Thank you in advance!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.