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

[lecstor]

It seems like there are multiple issues related to font rendering. I've managed to get some form of bolding working by copying the fonts and setup from the fontWeights example in the repo and building and installing the main branch locally. Unfortunately the behaviour seems rather esoteric to me.

For instance the following markup results in two lines, one regular, and one bold, rather than the expected alternating regular/bold sentences.

<View>
  <Text>
    Ut irure qui nisi.
    <Text style={{ fontWeight: 700, fontFamily: "Roboto" }}>
      Tempor enim irure excepteur.
    </Text>{" "}
    Nulla aliquip est excepteur.
  </Text>
  <Text>
    <Text style={{ fontWeight: 700, fontFamily: "Roboto" }}>
      Proident aliquip ea ullamco.
    </Text>{" "}
    Adipisicing ullamco sit in.
  </Text>
</View>

Another example is when you wrap the fontWeights example in Text tags it eliminates any bolding.

const MyDoc = () => {
  return (
    <Page style={styles.body}>
      <Text>
        <Text style={styles.regular}>Regular text</Text>
        <Text style={styles.medium}>Medium text</Text>
        <Text style={styles.bold}>Bold text</Text>
        <Text style={styles.black}>Black text</Text>
      </Text>
    </Page>
  );
};

[bdkopen]

@lecstor I believe the issues you are describing are fixed in #2747.

[astanb]

I tried adding the fix in #2747 and still can't get bold font weight to work.

[Hatko]

@alexstanbury had the same. Resolved it by specifying the version of @react-pdf/layout

[luskin]

@bdkopen It looks like this is still an issue, even with @react-pdf/[email protected] which claims to have the FontFamily Regression fix.

[bdkopen]

@bdkopen It looks like this is still an issue, even with @react-pdf/[email protected] which claims to have the FontFamily Regression fix.

@luskin unfortunately there are several issues that are causing similar regressions. I fixed one issue in #2731, but #2747 also has another fix.

Until the maintainer merges some of the PR fixes, you can try using older version of the package(s). @react-pdf/[email protected] is the latest version of the package and doesn't have any fixes included.

[mrsarm]

We used first just the default font used whatever is used by React PDF (not registering any font at all) and yes using fontWeight was not working, but after we registered a font with a set of different weights it worked, using latest versions of the libraries.

Code to register the font and define a layout:

import { Document, Font, StyleSheet, Text, View } from "@react-pdf/renderer";

const pageStyles = StyleSheet.create({
  title: {
    fontFamily: "Heebo",
    fontWeight: "bold",
    fontSize: 25,
    textAlign: "center",
  },
  subtitle: {
    fontFamily: "Heebo",
    textAlign: "center",
    fontSize: 12,
  },
});

Font.register({
  family: "Heebo",
  fonts: [
    {
      src: "src/fonts/heebo/heebo-v26-latin-100.ttf",
      fontWeight: "thin",
    },
    {
      src: "src/fonts/heebo/heebo-v26-latin-700.ttf",
      fontWeight: "bold",
    },
    {
      src: "src/fonts/heebo/heebo-v26-latin-regular.ttf",
      fontWeight: "normal",
    },
  ],
});

export const PDFLayout = ({
  children,
  // ...
}: {
  children: React.ReactNode;
  // ...
}) => {
  return (
    <Document>
      <Text style={pageStyles.title}>
        My Report
      </Text>
      <Text style={pageStyles.subtitle}>Section XYZ</Text>
      <View>{children}</View>
    </Document>
  );
};

package.json:

{
  //...
  "dependencies": {
    "@react-pdf/renderer": "^3.4.4",
    //...
  },
  "devDependencies": {
    "@react-pdf/types": "^2.5.0",
    //...
  }
}

And checking yarn.lock we have the following, that maybe is the reason why we don't have the same issues reported by others:

"@react-pdf/renderer@^3.4.4":
  version "3.4.4"
  resolved "https://r..."
  #...
"@react-pdf/stylesheet@^4.2.5":
  version "4.2.5"
  #...
"@react-pdf/font@^2.5.1":
  version "2.5.1"
  #...
"@react-pdf/textkit@^4.4.1":
  version "4.4.1"
"@react-pdf/types@^2.5.0":
  version "2.5.0"
"@react-pdf/[email protected]":
  version "2.2.1"
"@react-pdf/image@^2.3.6":
  version "2.3.6"
"@react-pdf/layout@^3.12.1":
  version "3.12.1"
"@react-pdf/pdfkit@^3.1.10":
  version "3.1.10"
"@react-pdf/png-js@^2.3.1":
  version "2.3.1"
"@react-pdf/primitives@^3.1.1":
  version "3.1.1"
"@react-pdf/render@^3.4.4":
  version "3.4.4"
"@react-pdf/stylesheet@^4.2.5":
  version "4.2.5"
"@react-pdf/textkit@^4.4.1":
  version "4.4.1"
# ...

[crohn]

Thanks @mrsarm, I confirm that this is working for me as well on v3.4.4.

The tricky part for me has been to get the assets, because I have a node service spawning several Node thread workers, which import an external library that exports the PDF generator. My issue was that the font registration happens in the external library, while the paths passed to Font.register are resolved in the worker's cwd.

[diegomura]

Should be fixed in latest version. Please re-open if it's not the case