diegomura / diegomura/react-pdf

Font Encoding When used with PDF Parser

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

Description

**Describe the bug**

When generating a PDF with @react-pdf/renderer in a React 18 application, custom fonts registered using Font.register appear correctly when viewing the PDF in a standard PDF viewer (e.g., Adobe Acrobat, browser PDF viewer). However, when the PDF is uploaded to a PDF parser (e.g., [coverbuild.io](https://coverbuild.io/)), the text using these custom fonts is parsed as garbled symbols. This suggests an encoding issue with how the fonts are embedded in the PDF.

The issue occurs with custom fonts from Google Fonts, including:
- Montserrat
- Assistant
- EB Garamond
- Catamaran
- Encode Sans
- Noto Sans
- Open Sans

Out-of-the-box fonts (Courier, Times, Helvetica) work correctly and are parsed as expected.

**To Reproduce**

1. Register custom fonts with Font.register in @react-pdf/renderer.
2. Apply the fonts in a PDF template.
3. Generate and download the PDF client-side.
4. Upload the PDF to a parser (e.g., coverbuild.io or similar tools).
5. Observe that text rendered with the custom fonts is parsed as garbled symbols instead of the correct Unicode characters.

You can also reproduce the issue with this minimal repo: [https://github.com/Abmiram/pdf-test](https://github.com/Abmiram/pdf-test)

**Expected behavior**

Text using custom fonts should be encoded and embedded correctly in the PDF so that parsers interpret the characters as their intended Unicode values.

**Screenshots**

[resume-example.pdf](https://github.com/user-attachments/files/18540396/resume-example.pdf)

![Image](https://github.com/user-attachments/assets/f300d3cd-56da-4694-bdf8-d6fc762c54dd)

**Desktop (please complete the following information):**

- OS: macOS
- Browser: Chrome
- React-pdf version: 4.1.6
- React version: 18

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.