react-pdf: Unable to load local font file with Font.register in Next.js

OS: Windows 11 React-pdf version: 3.1.6

Description: Hello, I’ve been trying to register a font for the document from the local file system (since I’m using Nex.js). What i’ve noticed is that if I use the following, the document is never generated

Font.register({ family: "Helvetica Neue", fonts: [{ src: "/public/fonts/helveticaNeue-std.woff2" }], });

I need to use local font because Helvetica font is not on google fonts, but it doesn’t read the from the local Could you give me the solution for this?

Thank you

About this issue

Original URL
State: closed
Created a year ago
Comments: 16

Most upvoted comments

Though this is closed, let me just leave this here incase someone needs it. I managed to make it work through trial and error by registering like this:

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

I have my fonts on $root/public directory. Using relative path .../.../public/font/font-file didn’t work for me. probably related to nextjs’s webpack config. After figuring out the solution, I saw this documentation from next.js, pointing out how to access public files.

rafhpabustan on Nov 24, 2023

Hi,

Is there any update?

tunjayhuseynov on Sep 8, 2023

any update ?

Ariuk0112 on Oct 23, 2023

Though this is closed, let me just leave this here incase someone needs it. I managed to make it work through trial and error by registering like this:
Font.register({
  family: "FontName",
  src: "/fonts/font-file.otf",
});
I have my fonts on $root/public directory. Using relative path .../.../public/font/font-file didn’t work for me. probably related to nextjs’s webpack config. After figuring out the solution, I saw this documentation from next.js, pointing out how to access public files.

This works for me, i moved my fonts file from app to public and directly use it on the register function like this: Font.register({ family: 'Calibri', format: 'truetype', src: "/fonts/calibri.ttf", });

isaico on Jan 20, 2024

Still having an issue with this.

In NextJS, I can’t do

import font from './font.ttf';

To load a local font, the doc recommends doing

import localFont from 'next/font/local'
const font = localFont({ src: './font.ttf' })

However, I am not able to use font in React-pdf’s Font.register() like this

Font.register({
  family: "Font",
  src: font
});

Is there any way to make NextJS and React-PDF work together?

zdettwiler on Jul 25, 2023

@leonace924 remove public from the font path

jeetiss on Mar 6, 2023