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]

⚠️ No Changeset found

Latest commit: e5f9602

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

[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.