react-pdf: 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! 😄

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (2 by maintainers)

Most upvoted comments

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

+16

jp06 on Jun 22, 2019

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',
});

trdaya on May 29, 2022

I know this is closed, but I’m just leaving this incase someone needs this as I’ve spent multiple hours just looking for a way to use local font for react-pdf on nextjs projects.

If your fonts are on $root/public folder you can register it like this:

Font.register({
   family: "FontName",
   src: "/fonts/font-file.otf" 
});

Note: using relative pathing ../../../public/... doesn’t seem to work at all. Same issue even if I put it inside the src folder.

rafhpabustan on Nov 24, 2023

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.

NishRaj on Jan 22, 2020

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

nicmosc on Dec 4, 2018

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 on Dec 4, 2018

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

StuClift on Dec 4, 2018