React-to-print: Custom fonts on Next.js

[k-jiang]

Hi! I'm trying to use react-to-print with Next.js. But it seems that the fonts props introduced in #285 can not load my custom fonts in Next.js correctly.

When I try to print, the console gives me an error:

"react-to-print" was unable to load a font. "react-to-print" will continue attempting to print the page. The font that failed to load is:

FontFace {family: "SimHei", style: "normal", weight: "normal", stretch: "normal", unicodeRange: "U+0-10FFFF", …}
  display: "auto"
  family: "SimHei"
  featureSettings: "normal"
  loaded: Promise {<rejected>: DOMException: The source provided ('../../public/fonts/SimHei.ttf') could not be parsed as a value …}
  status: "error"
  stretch: "normal"
  style: "normal"
  unicodeRange: "U+0-10FFFF"
  variant: "normal"
  weight: "normal"
  __proto__: FontFace

The error from loading the font is: DOMException: The source provided ('../../public/fonts/SimHei.ttf') could not be parsed as a value list.

Here is my fonts props:

[
    {
        family: "SFUI-Medium",
        source: "../../public/fonts/SFUI-Medium.ttf"
    },
    {
        family: "SimHei",
        source: "../../public/fonts/SimHei.ttf"
    }
]

If I try to enclose the "source" with "url(...)", e.g. source: "url(../../public/fonts/SimHei.ttf)" it gives me some another errors:

GET http://localhost:3000/public/fonts/SimHei.ttf net::ERR_ABORTED 404 (Not Found)

"react-to-print" was unable to load a font. "react-to-print" will continue attempting to print the page. The font that failed to load is:
FontFace {family: "SimHei", style: "normal", weight: "normal", stretch: "normal", unicodeRange: "U+0-10FFFF", …}
The error from loading the font is: DOMException: A network error occurred.

I'm guessing it is because the Next.js framework has a different packaging mechanism. When loading fonts with the normal @face css, Next.js will rename and package the font files in a special path like this:

http://localhost:3000/_next/static/media/SimHei.3c05a167c5aac16447ad3bcea798da81.ttf

This might be the reason why react-to-print can not reference the ttf file directly or load it by url(...). Maybe it is either not packaged by Next.js correctly or it's in a different location.

Are there any way to force react-to-print to load a fonts correctly under Next.js? Maybe I need to enclose the path with some magic Next.js method but I can not find any of them. Also I don't want to use next.config.js otherwise I will have 3 different settings to maintain (the next.config.js, fonts props and the css for display) just to load the same things.

Any idea please?

Packages I used:

"next": "^9.5.5",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-to-print": "^2.11.0",

[MatthewHerbst]

Hello. Interesting indeed. Someone else is having a somewhat similar issue with webpack. I'm not a Nextjs expert though my company uses it so I'll see tomorrow if anyone has any ideas here. Just an FYI: react-to-print just does an exact copy of whatever is in the DOM, so we would have to change what's there probably.

[mojtaba-hajishah]

I have the same issue.
I'm using webpack to bundle my assets and no matter how I reference my font file, I get an error from react-to-print.

[jenridunn]

Loading Fonts is not working even in your DEMO code sandbox, I've tried to load from [{family:"..." ,source: "url(...)"}] ttf files, woff files, cdn urls like this: http://fonts.cdnfonts.com/css/sf-hallucination-2; and nothing is working. I don't receive any errors on console but the font remains the same.

[MatthewHerbst]

Revisiting this: could you share the CSS where you use the fonts please? As noted in #338 I'm not exactly sure if fonts is even needed at all

[jenridunn]

@k-jiang and @MatthewHerbst I can confirm that the prop fonts is not needed anymore. You just have to apply the style (font-face) and it will be printed as it is displayed in your monitor. Thanks! @MatthewHerbst