Custom fonts not copying correctly

[rajat-barman-js]

While Printing a component.
Most of the texts in original page vanishes in chrome somehow. but doing the same thing in safari or firefox doesn't produce such behaviour

behaviour in chrome
As you can see the labels texts in the original page at the back is is spomehow vanished

but in the firefox its behaviour is correct

P.S.- we are using custom font in the website

[MatthewHerbst]

Hi. That is very strange indeed! Would you mind sharing a working codesandbox or similar that replicates the problem? would love to dig deeper into this

[MatthewHerbst]

Also, have to ask: did you verify that this only happens when printing with react-to-print, or does it also happen when just printing normally with ctrl/cmd + p?

[rajat-barman-js]

Also, have to ask: did you verify that this only happens when printing with react-to-print, or does it also happen when just printing normally with ctrl/cmd + p?

Tried with cmd +p
it works fine

[rajat-barman-js]

Hi. That is very strange indeed! Would you mind sharing a working codesandbox or similar that replicates the problem? would love to dig deeper into this

We are using Gustanlp-Book in the system which might be creating problem.
Is there some existing bug related to font??

[MatthewHerbst]

If you use a normal font does it work? It's possible we don't copy over fonts properly

[rajat-barman-js]

If you use a normal font does it work? It's possible we don't copy over fonts properly

it works with normal font, but doesn't work with our custom font

[MatthewHerbst]

Interesting. I'll look into it. Must be a special thing we need to do to copy custom fonts over. Thanks for helping narrowing it down

[MatthewHerbst]

Can you show me please how you include your custom fonts on the page?

[rajat-barman-js]

Can you show me please how you include your custom fonts on the page?

@font-face {
  font-family: 'test';
  src: local('test'), url(./fonts/Gustanlp-Book.otf) format('opentype');
}

body {
  margin: 0;
  padding: 0;
  font-family: test;
}

[MatthewHerbst]

So, the issue is that we are not waiting for the fonts to load before opening the print preview window, because we don't know that there even are fonts that are loading. We currently listen for HTML and CSS loads to finish, but font loads happen in their own world. I think I can offer a new prop that would fix this using the new CSS Font Loading API (only for new browsers, won't work in IE11). Will try and make a PR showing it tomorrow. It would be something like:

<ReactToPrint
  ...
  fonts=[{ name: 'Font', url: 'urlToDownloadFront', local: 'localFontFileIfAny' }]
/>

Then I would do something like this example to wait for them to load before printing

[rajat-barman-js]

So, the issue is that we are not waiting for the fonts to load before opening the print preview window, because we don't know that there even are fonts that are loading. We currently listen for HTML and CSS loads to finish, but font loads happen in their own world. I think I can offer a new prop that would fix this using the new CSS Font Loading API (only for new browsers, won't work in IE11). Will try and make a PR showing it tomorrow. It would be something like:

<ReactToPrint
  ...
  fonts=[{ name: 'Font', url: 'urlToDownloadFront', local: 'localFontFileIfAny' }]
/>

Then I would do something like this example to wait for them to load before printing

That would be great.

Thanks

[MatthewHerbst]

Hey, checkout #285 and let me know if that works for you. If you could test it by trying to run it locally with the fonts you have that would be fantastic too

[MatthewHerbst]

Hi @iamthespecial1 did you have a chance to look at that PR? I'm excited to get it merged but I'd like to make sure it actually solves your problem first

[MatthewHerbst]

Published as v2.11.0 🎉

[hahouari]

Can you show me please how you include your custom fonts on the page?

@font-face {
  font-family: 'test';
  src: local('test'), url(./fonts/Gustanlp-Book.otf) format('opentype');
}

body {
  margin: 0;
  padding: 0;
  font-family: test;
}

I faced the exact same problem and trying to solve it for two days, as @MatthewHerbst said the fonts are not loaded when the print dialog is opened, adding font-display: swap to @font-face clause allows the browser to wait a little for the font to load as mentioned in Mozilla MDN, keep in mind browser support, so your css code would be:

@font-face {
  font-family: 'test';
  font-display: swap; // << add this
  src: local('test'), url(./fonts/Gustanlp-Book.otf) format('opentype');
}

[youneszahzouh]

  font-display: swap; // << add this

adding this worked for me .. thanks