diegomura / diegomura/react-pdf
Custom fonts break PDFs when viewed in Adobe Reader
- 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.

**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
Assessment
This issue has not been assessed yet.