react-pdf icon indicating copy to clipboard operation
react-pdf copied to clipboard

patch: force render standard fonts

Open sikemonster opened this issue 1 year ago • 5 comments

This is a follow up fix to my issue https://github.com/diegomura/react-pdf/issues/2818

Problem: When styling <Text/> with standard fontFamily such font doesn't render and instead it falls back to Helvetica which is the currently configured default font.

Fix: I copied the following code and included a condition inside pickFontFromFontStack to force selecting the font that the user actually picked.

var standard = ['Courier', 'Courier-Bold', 'Courier-Oblique', 'Courier-BoldOblique', 'Helvetica', 'Helvetica-Bold', 'Helvetica-Oblique', 'Helvetica-BoldOblique', 'Times-Roman', 'Times-Bold', 'Times-Italic', 'Times-BoldItalic'];

Please review @diegomura 🙏

sikemonster avatar Jul 22 '24 18:07 sikemonster

⚠️ No Changeset found

Latest commit: a31f8f6ab7cbee1c43249ccdce10da58b3e60c09

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

changeset-bot[bot] avatar Jul 22 '24 18:07 changeset-bot[bot]

Will this also fix custom fonts loaded via Font.register?

theskillwithin avatar Jul 29 '24 17:07 theskillwithin

@theskillwithin i never experienced issues with Font.register so i never attempted to fix it, this will most likely not fix your issue. Out of curiosity, what is your setup?

sikemonster avatar Jul 30 '24 05:07 sikemonster

@theskillwithin i never experienced issues with Font.register so i never attempted to fix it, this will most likely not fix your issue. Out of curiosity, what is your setup?

@mrjeanp For some reason the Font.register only works with external fonts. (I am using the words internal and external here to mean local path or external url path)

as soon as i try to use an internal font path by module loading or pointing to relative path /fonts/foo.ttf it does not work

oddly if I point to the same font like: https://mysite.com/fonts/foo.ttf this does work

using Remix (loaded via vite)

theskillwithin avatar Jul 30 '24 10:07 theskillwithin

Taken from https://react-pdf.org/fonts#register image

Try using an absolute path, maybe use something like path.join(__dirname, '../fonts/foo.ttf')

sikemonster avatar Jul 31 '24 19:07 sikemonster