fix: font selection regression

[andrew-spare]

This recent change #2640 appears to have caused a regression where the first font used in a line of text is utilized for the entire line. This includes usage of fontFamily, fontWeight, and fontStyle.

Changes

• Fixed pickFontFromFontStack to select from fontStack before lastFont. This should now properly prioritize fonts
• Added unit tests: packages/layout/tests/text/fontSubstitution.test.js
• Updated example document to include this scenario

Related

• feat: add fallback font support #2640
• 3.4.4 font changes no longer apply #2730
• Bug where styles are not correctly inherited wojtekmaj/react-pdf#1790

Example

<Text style={{ fontSize: 10 }}>
  The following are multiple font families, weights, and styles all on the
  same line
</Text>
<Text style={{ fontFamily: 'Roboto' }}>
  Roboto Normal{' / '}
  <Text style={{ fontWeight: 'bold' }}>Roboto Bold</Text>
  {' / '}
  <Text style={{ fontStyle: 'italic' }}>Roboto Italic</Text>
  {' / '}
  <Text style={{ fontFamily: 'Courier' }}>Courier</Text>
</Text>

Before

After

[changeset-bot]

🦋 Changeset detected

Latest commit: 89e8f82

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@react-pdf/examples	Patch
@react-pdf/layout	Patch
@react-pdf/renderer	Patch
@react-pdf/e2e-node-cjs	Patch
@react-pdf/e2e-node-esm	Patch

Not sure what this means? Click here to learn what changesets are.

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

[iSilkline]

@diegomura could you please merge this?

[TomasSalas]

@diegomura Plase merge this ! i need :(

[websnacks]

Yes I am using this library as well and right now the fonts are not working correctly. This fix is what I am waiting for! Please merge!

[TomasSalas]

@websnacks Dear, when can we see the change reflected in the library? I am waiting for this change to upload a code to improve a PDF

[TomasSalas]

When are the changes going to go up? I need it @diegomura @bdkopen

[Hatko]

I applied these changes, but still couldn't get the bold font back. Instead, to resolve it, I forced the resolution of "@react-pdf/layout" to point to 3.11.5. We are using bun, for it you need to add:

"overrides": {
    "@react-pdf/layout": "3.11.5"
},

to your package.json

[TomasSalas]

@Hatko @websnacks @diegomura
What you tell me doesn't work for me since I work with @react-pdf/renderer

I have not implemented @react-pdf/layout in my project

This is where I have the problem

[lecstor]

@TomasSalas the fix needs to be applied to the @react-pdf/layout package which @react-pdf/renderer depends on.
I applied the fix using yarn patch @react-pdf/layout (as I use yarn for my package manager) and can confirm that it resolved the issue in our application.

https://yarnpkg.com/cli/patch

[TomasSalas]

@lecstor Could you help me with my project? since I work with NPM and I do not fully understand what you are telling me to be able to use what I need in the texts ??

[lecstor]

@TomasSalas it looks like you could use this then.. https://www.npmjs.com/package/patch-package

You'll need to open node_modules/@react-pdf/layout/lib/index.js in your project and apply the fix in this PR. (and do the same to node_modules/@react-pdf/layout/lib/index.cjs)

Then follow the instructions in patch-package to create the patch and commit it to your repo.

[TomasSalas]

@lecstor

I made the change in node modules and nothing changes

[lecstor]

@TomasSalas have a look at the PR. Did you remove lines 204 to 206?

[Elliot67]

@TomasSalas

What you tell me doesn't work for me since I work with @react-pdf/renderer

I believe @react-pdf/renderer uses @react-pdf/layout under the hood.
Try to pin a specific version of @react-pdf/layout as mentioned by @Hatko.

If you are using yarn, replace overrides with resolutions:

"resolutions": {
    "@react-pdf/layout": "3.11.5"
},

[TomasSalas]

@lecstor yes remove lines 204 to 206

[lecstor]

@TomasSalas not according to that screenshot in your last comment.
Please look at the PR changes.

These lines should not remain..

if (lastFont) {
  fontStackWithFallback.unshift(lastFont);
}

[TomasSalas]

@lecstor
It worked ! Thank you very much.. the last question, if this goes to production, will there be any problems? Or what should I do when building the app?

[lecstor]

@TomasSalas as long as you add the postinstall script as per the instructions the package should be patched whenever npm install is run, which should include during CI when deploying to prod.

[JustJoostNL]

I have applied the patch like above, but unfortunately it's still not working (font weight).

[TomasSalas]

Is it known when the changes will be uploaded? @diegomura @bdkopen

[bdkopen]

Is it known when the changes will be uploaded? @diegomura @bdkopen

I am not a maintainer, so I have no control over when this will be merged.

[TomasSalas]

@bdkopen And do you know who the maintainer is? so I can request his help?

[bdkopen]

@bdkopen And do you know who the maintainer is? so I can request his help?

@diegomura is the primary maintainer.

[C4T4]

@diegomura merge needed

[TomasSalas]

@diegomura please 🙏🏻

[iSilkline]

@diegomura It's been 2+ months in the last merge. Are you still able to maintain this repo?

[diegomura]

utACK

[TomasSalas]

I just updated the library and it doesn't work @diegomura

[iSilkline]

@TomasSalas it's because it's not released yet. last release is april 25