Error: Unknown font format

[ArseniySushCorp]

Describe the bug Import fonts is broken, when pass the file path.

To Reproduce https://react-pdf.org/repl?example=font-register

[carlobeltrame]

This was fixed in #1934, we are just waiting for a new release of react-pdf now.

[EvHaus]

Looks like that change shipped, but the example is still broken.

[b-bot]

This can be fixed by adding the fonts to the public folder in the project root as the source needs to be absolute. ie. expose it at https://react-pdf.org/Roboto-Regular.ttf

[paschaldev]

For Next.JS, this fixed the issue for me.

• Place the fonts in the public directory. I put mine in /public/fonts.

import { PropsWithChildren } from "react";

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

const defaultFont = "NunitoSans"; // Set the font family name
 // Regular 400 font. The URL should be publicly accessible
const regularFont = `${process.env.NEXT_PUBLIC_APP_URL}/fonts/nunito-sans.woff2`;

Font.register({
  family: defaultFont,
  fonts: [
    {
      src: regularFont,
      fontWeight: 400,
    },
  ],
});

// Reference font
const styles = StyleSheet.create({
  page: {
    fontFamily: defaultFont,
  },
});

const PdfDocument: React.FC<PropsWithChildren> = ({ children }) => {
  return (
    <Document>
      <Page style={styles.page}>
        <View>{children}</View>
      </Page>
    </Document>
  );
};

export default PdfDocument;

[Sergey-lang]

https://github.com/diegomura/react-pdf/issues/2223#issuecomment-1943292145