0

I have created a PDF with react-pdf that is downloaded on click on the PDFDownloadLink that is generated within the component that hosts it.

This works fine when I am viewing things on my localhost express server, however once I have deployed this to my test environment, it is having issues with a custom font I have introduced, and I'm not sure as to why it seems like it can't find the font.

I have added the font to /src/fonts/MyFont.woff and have added this to the font-face.css file, but when I am viewing the component on my environment and look in the source tab of dev tools, it doesn't appear that the font is loaded? This is strange, as there is a pre-existing, custom font that I have also had to import manually for the react-pdf stuff, and that seems to work perfectly on the environment... I do know that this is stored elsewhere in another connected repo and have also included my new font in all of the same locations, but it doesn't seem to want to play ball at all.

MyComponent

<PDFDownloadLink
    document={<MyPDF />}
    fileName="summary.pdf"
>
    {({ blob, url, loading, error }) => {
        console.log({blob, url, loading, error});
        return !!loading ? 'Creating PDF' : 'Download PDF'
    }}
</PDFDownloadLink>

MyPDF

import MyFont from '../fonts/MyFont.woff';

const MyPDF = (props) => {

    Font.register({ 
        family: 'MyFont', 
        src: MyFont, 
        fontStyle: 'normal', 
        fontWeight: 'normal'
    });


    // PDF stuff here

font-face.css

@font-face {
    font-family: MyFont;
    src: url('../fonts/MyFont.woff);
}

The file structure is something along the lines of:

src/
├── css/
│   ├── font-face.css
├── components/
│   ├── MyComponent.jsx
│   └── MyPDF.jsx
└── fonts/
    ├── MyFont.woff
physicsboy
  • 5,656
  • 17
  • 70
  • 119
  • @KJ thanks for the advice, but I am also experiencing the same issue when it comes to the TTF version of this font... Any ideas? – physicsboy Feb 10 '23 at 08:03
  • Points 1 and 3 shouldn't be an issue as the font works fine on my localhost server, it's just when I deploy to my environment that it's going wrong. Point 2 shouldn't be an issue either as I have 1 other custom font that appears to be working fine... – physicsboy Feb 10 '23 at 14:21

0 Answers0