diegomura / diegomura/react-pdf
Using custom font causes usePDF instance to indefinitely remain as 'loading'
- 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
Assessment
This issue has not been assessed yet.