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