Unable to load local font file with `Font.register`

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! 😄

[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
})

[trdaya]

I had an issue with using google font. Found a solution here.

Steps:

• curl the google font (ex: curl 'https://fonts.googleapis.com/css2?family=Open+Sans&display=swap')
• use the .ttf URL received in the above step as the src

Font.register({
  family: 'Open Sans',
  src: 'https://fonts.gstatic.com/s/opensans/v29/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0C4n.ttf',
});