Custom font causes infinite pending of `toBlob`

[FrodoLuo]

Describe the bug

Using custom font will cause an infinite pending of the toBlob method.

To Reproduce

I've reproduced this in both CRA and Vite project.

To reproduce it:

1. register and use some font (just registering will not trigger this)
2. invoke the toBlob method of the PDF instance

An example:

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

export const run = async () => {
  const dom = () => {
    return (
      <Document>
        <Page>
          <View>
            <Text style={{ fontFamily: "SomeFont" }}>Test</Text>
            {/* <Text style={{ fontFamily: "Helvetica" }}>Test</Text> */}
          </View>
        </Page>
      </Document>
    );
  };

  Font.register({
    family: "SomeFont",
    src: "/assets/Roboto-Regular.ttf",
  });

  pdf(dom())
    .toBlob()
    .then((blob) => {
      console.log(blob);
    })
    .catch((err) => {
      console.error(err);
    });
};

P.S. once use the builtin Helvetica the blob could be properly generated.

I've dived into the root cause, and it seems it's related to the _fontFamily property of the PDFDocument

Custom font seems not to be properly added to the _fontFamily, thus related PDFReference will not be finalized on the document's ending. In packages/pdfkit/src/mixins/fonts.js:64-66, the _font.name is null for a custom font, so it would not be added to the _fontFamilies and will not be finalized in packages/pdfkit/src/document.js:262-265.

As for the _font.name, I found the initializing in packages/pdfkit/src/font/embedded.js:21, and the postscriptName seems to be initialized in the constructor of FontSource. While I tryed add a postscriptName to the option of register, an error was thrown:

Error: Variations require a font with the fvar, gvar and glyf, or CFF2 tables.

Any idea on it? Please let know if this is a misusage.

---

Version Used

• renderer: 3.4.4
• fns: 2.2.1
• font: 2.5.1
• layout: 3.12.1
• pdfkit: 3.1.10
• primitives: 3.1.1
• render: 3.4.4
• stylesheet: 4.2.5
• textkit: 4.4.1
• types: 2.5.0

[tokudu]

I think you are seeing the same issue as https://github.com/diegomura/react-pdf/issues/2706, try overriding restructure version.

[FrodoLuo]

I think you are seeing the same issue as #2706, try overriding restructure version.

yes... it seems the same issue. And the solution https://github.com/diegomura/react-pdf/issues/2706#issuecomment-2049517221 could resolve this.

note: the restructure should be installed with exact 3.0.0 version; 3.0.1 will cause this issue.

[santrajyadav196]

I havnt used this npm restructure, i am using react whch is 16.14 and react-pdf/renderer 2.1.0. I installed above npm [email protected] but it could not resolve. I am getting error due to external font wont work using Font.register() method. Pls let me know how to resolve this issue. Thanks in advance.