3.4.4 font changes no longer apply

[Mudbill]

Describe the bug

I updated the library from 3.4.2 to 3.4.4 and fontFamily no longer applies. I see that there are font related changes in these updates, so perhaps it is related to that.

To Reproduce

<View>
  <Text>This is normal text</Text>
  <Text style={{ fontFamily: "Helvetica-Bold" }}>This should be bold</Text>
  <Text style={{ fontWeight: 700 }}>This should probably also be bold</Text>
  <Text style={{ fontFamily: "Courier" }}>This should use the Courier font</Text>
</View>

All of the above appear as the same, default Helvetica 400.

Expected behavior

Font changes should apply correctly.

Note: Using fontWeight before 3.4.2 didn't work either. I was only able to set bold font using Helvetica-Bold font family. Maybe Helvetica-Bold is not registered as a bold variant of Helvetica, but rather its own family?

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• React-pdf version: 3.4.4

[bdkopen]

@Mudbill I located the issue and opened #2731 to address the font family regression. This does not include the fontWeight issue introduced prior to 3.4.2.

[joacub]

this also breaks registering fonts like SFMono-Semibold.ttf, it never loads pdf get stuck rendering

[bdkopen]

this also breaks registering fonts like SFMono-Semibold.ttf, it never loads pdf get stuck rendering

@joacub Can you provide an example that works in 3.4.2 but does not work in 3.4.4? This may not be a related issue. I was able to load a SFMono-Semibold font in both 3.4.2 and 3.4.4 fine. Note that I found many SFMono files are an "otf" extension, not "ttf" like you wrote in your message.

[DaveFPath]

Last week I updated to 3.4.4, and I got a report from a client saying that all the bold text in all the pdf's were no longer bold. Upon reading up on this thread and others, I believe my problem is the same as this one.

  companyName: {
    fontWeight: "bold",
    fontFamily: "Helvetica-Bold",
  },

When applying this className to the text component, the text is not bold. I have tried variants of the above with no luck.

[joacub]

this also breaks registering fonts like SFMono-Semibold.ttf, it never loads pdf get stuck rendering

@joacub Can you provide an example that works in 3.4.2 but does not work in 3.4.4? This may not be a related issue. I was able to load a SFMono-Semibold font in both 3.4.2 and 3.4.4 fine. Note that I found many SFMono files are an "otf" extension, not "ttf" like you wrote in your message.

I convert to ttf, the thing is it was working before this update. Don’t know the reason.

[bdkopen]

Last week I updated to 3.4.4, and I got a report from a client saying that all the bold text in all the pdf's were no longer bold. Upon reading up on this thread and others, I believe my problem is the same as this one.

  companyName: {
    fontWeight: "bold",
    fontFamily: "Helvetica-Bold",
  },

When applying this className to the text component, the text is not bold. I have tried variants of the above with no luck.

I agree, this looks like the same issue. The fix in #2731 is merged and should be part of the next release.

I convert to ttf, the thing is it was working before this update. Don’t know the reason.

@joacub I wasn't able to reproduce this issue, but maybe the fix in #2731 will fix it. If the next release doesn't fix the issue, it may be worth making a new issue with a code example to reproduce the problem.

[joacub]

Last week I updated to 3.4.4, and I got a report from a client saying that all the bold text in all the pdf's were no longer bold. Upon reading up on this thread and others, I believe my problem is the same as this one.

  companyName: {
    fontWeight: "bold",
    fontFamily: "Helvetica-Bold",
  },

When applying this className to the text component, the text is not bold. I have tried variants of the above with no luck.

I agree, this looks like the same issue. The fix in #2731 is merged and should be part of the next release.

I convert to ttf, the thing is it was working before this update. Don’t know the reason.

@joacub I wasn't able to reproduce this issue, but maybe the fix in #2731 will fix it. If the next release doesn't fix the issue, it may be worth making a new issue with a code example to reproduce the problem.

Yeah, im waiting for the fix to test, it was working but suddenly stop working, font loads but the render get stuck, never finished, no errors no feedback

[Tim0Cc]

We recently react-pdf/renderer to our repo For some team-members, fontFamily: "Helvetica-Bold", get's applied and the result is indeed bold and Helvetica, for some it isn't, for sure not bold, probably not even Helvetica.

Is there a problem for some devices / OS / Hardware / Chrome-Settings / ... ?

OS: macOS (different M-Chips though) Browser: Chrome React-pdf version: ^3.4.2

[bdkopen]

We recently react-pdf/renderer to our repo For some team-members, fontFamily: "Helvetica-Bold", get's applied and the result is indeed bold and Helvetica, for some it isn't, for sure not bold, probably not even Helvetica.

Is there a problem for some devices / OS / Hardware / Chrome-Settings / ... ?

OS: macOS (different M-Chips though) Browser: Chrome React-pdf version: ^3.4.2

@Tim0Cc the likely issue is that some of your team is running 3.4.2 while others are running 3.4.4 (the version with the regression). The ^ allows minor upgrades to the packages. If everyone on your team re-install dependencies then everyone should be able to reproduce the issue.

[Tim0Cc]

we made it work (somehow). (thx @bdkopen for your hint)

we downgraded to "@react-pdf/renderer": "3.1.9" needed to use npm i instaed of yarn (maybe issues with yarn ???) and use one package-lock.json file which worked (sometimes it didn't, but once it worked for one team-member, using the same package-lock.json worked for everyone)

[Mudbill]

@Tim0Cc if you lock the version with either yarn or npm, then you should also re-use the same package manager to unlock or change it. Mixing yarn and npm means both of them will try to lock package versions, and will likely end up locking different versions, causing inconsistencies across installs. If package-lock.json is what you use now, you might want to delete yarn.lock. By the way, it should be sufficient to downgrade to 3.4.2 instead of all the way to 3.1.9 to fix the bold issue.

[Tim0Cc]

@Mudbill unfortunatelly 3.4.2 doesn't render bold. we were previously using yarn consistently ... switching to npm for installation did the trick to get the fonts bold on v3.1.9 ... so from now on npm until the issue is fixed ...