React-pdf: Unable to load local font file with `Font.register`

[nicmosc]

OS: Mac OS 10.41.1

React-pdf version: 1.0.0-alpha.25

Description:
Hello it's me again! I've been trying to register a font for the document from the local file system (since I'm using electron). What i've noticed is that if I use the following, the document is never generated (probably because fetchFont never returns):

Font.register(
  'fonts/OpenSans-Regular.ttf',
  { family: 'OpenSans' },
);

Here fonts lives at the root of the project. This normally works fine with images as well. However, using this:

Font.register(
  'http://localhost:4000/fonts/OpenSans-Regular.ttf',
  { family: 'OpenSans' },
);

Works. So as I imagine, since this is a direct url to the server (in the case the dev server from webpack) the font is returned as expected. But passing a relative path to the file in the current folder will not work. This is a shame since it means only files served over a server (local or remote) can be registered. And while the above works in development, when the dev server is active, it won't work in production since the app is a static app that does not require a server. The workaround for this would be to have a dummy express server at the root of the project that serves static files like this one, though it would be nice to be able to load from the local file system too.

Is there any way this can be achieved with react-pdf directly? As i've seen that the original proposed api example used a local path to the font: https://github.com/diegomura/react-pdf/issues/

Thanks! 😄

[StuClift]

Have you tried providing the full path to the font file with the help of app.getAppPath() or more crudely __dirname?

[nicmosc]

@GWStuartClift still no luck with both, in the end what I ended up doing is setting up a static express server so that i can always do http://localhost:{port}/fonts/OpenSans.... That works like a charm. I imagine it's like I expected, a local file isnt loaded properly. The thing is, it fails silently. The file blob is never generated and it stays on loading

[diegomura]

As @GWStuartClift , you should use app.getAppPath() or __dirname to reference the file in your file system. All react-pdf does is checking if src is an url, and if not it passes that very same data to fontkit to open the file (see here)

I truly don't know what more can be done to make it more flexible, but if you have an idea please do not hesitate to share it here. Otherwise I'll close this issue

[diegomura]

Odd. I have it working using __dirname. Is it possible it has something to do with electron?

[nicmosc]

@diegomura i think we can close the issue for now then. I'll stick with the express server solution for right now. if i decide to go back to trying another way without express i'll come back and post my solution. Thanks a lot for the help guys!

[jp06]

If I am not misunderstanding anything terribly here, my approach is something like this:

import font from '../some/directory/font.ttf'

Font.register({
  family: 'Font Name',
  src: font
})

[DylanVerstraete]

@jp06 Tried that, when I run electron in production it gives me following error.

Uncaught (in promise) Error: ENOENT: no such file or directory, open './dist/dcf70311333833bd34f350118ef3f644.woff'

In development mode, importing a font like any other module works like a charm. I think it has something to do with my webpack configuration. As of is, I import all .wof and .ttf files with url-loader.

[zoosissoos]

@DylanVerstraete Were you ever able to resolve this?

Font.register({ family: 'Poppins', fonts: [ { src: '../webfonts/Poppins-Light.ttf' }, { src: '../webfonts/Poppins-Bold.ttf', fontWeight: '900'}, ]});
seems to work for me in development,
but in production Im getting an error

backend.js:6 Error: Unknown font format

[DylanVerstraete]

@zoosissoos Nope sorry

[NishRaj]

If I am not misunderstanding anything terribly here, my approach is something like this:

import font from '../some/directory/font.ttf'

Font.register({
  family: 'Font Name',
  src: font
})

Thanks @jp06 . This is the way it worked for me also. Giving the directory path in the 'src' attribute never worked for me. Importing the font directly in Js file did the trick. The downside of this approach is that import statements becomes huge if there are too many fonts to be imported but still I will stick to this approach till {__dirName} approach starts working for me.

[igorvc30]

I had this problem using NextJS. I solved this problem using require and installing next-fonts. So a downloaded the .tff and put it at the same folder. This was a really tricky problem, I tried using static folder and url. It was working at dev mode and local builds, but once I sent to production using AWS Amplify, my PDF Viewer was broken.

const font = require('./mplus.ttf')
Font.register({
  family: 'mplus-1',
  src: font
})

[benRivello]

I had this issue while developing pdfs using storybook. I had to add the -s flag in the storybook script in my package.json to ensure the file was served correctly on the local storybook server.

...
"scripts": {
    "storybook": "start-storybook -s -p 6006",
    ...
}