diegomura / diegomura/react-pdf

Using custom font causes usePDF instance to indefinitely remain as 'loading'

Open
#2,675 44 comments 39 reactions 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**
Registering a custom font with Font.register() results in usePDF never generating the PDF as expected. Commenting out the use of the custom font in StyleSheet allows PDF to generate, which leads me to believe it is an issue with how @react-pdf/renderer instantiates custom fonts. There is no error thrown, making it very difficult to diagnose the issue...

**To Reproduce**
This minimal example of index.tsx shows the reproducible error (React 18, Webpack 5 configuration, NOT Create React App):
```
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Document, Page, Text, Font, usePDF, StyleSheet } from '@react-pdf/renderer'
import ArialBold from './arial-bold.ttf'

Font.register({
family: 'Arial',
fonts: [
{
src: ArialBold,
fontStyle: 'normal',
fontWeight: 'bold'
}
]
})

const styles = StyleSheet.create({
heading: {
//comment these 2 lines out and it will generate PDF properly
fontFamily: 'Arial',
fontWeight: 'bold',

fontSize: 20,
color: '#006699'
}
})

const App = () => {
const [instance] = usePDF({
document: (


text1
text2
text3


)
})

console.log('ArialBold', ArialBold)
console.log('Font.getRegisteredFonts().', Font.getRegisteredFonts())
console.log('instance', instance)

return (

DOWNLOAD PDF

)
}

const root = ReactDOM.createRoot(document.getElementById('root')!)

root.render(



)
```

Output of console.logs shows the path to the font and the font being registered, however the instance.loading remains = true indefinately. I have followed the path to the font and the path is correct

> 14:25:01.850 index.tsx:39 ArialBold /media/arial-bold.ff5427169c7aaacb3946.ttf
> 14:25:01.850 index.tsx:40 Font.getRegisteredFonts(). {Arial: Font}
> 14:25:01.850 index.tsx:41 instance {url: null, blob: null, error: null, loading: true}

**Expected behavior**
PDF is available to download via instance.url

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

- OS: Windows 10
- Browser: Chromium
- React-pdf version: 3.3.8

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.