0

enter image description here

I'm getting this error code when trying to load a local font to my PDF project.

I've followed the documentation and tried several ways to import the font.

import DinPro from "../../../../assets/fonts/DinProFont/DINPro-Medium_13936.ttf";

Font.register({
  family: "DINPro",
  format: "truetype",
  src: DinPro,
  fontStyle: "normal",
  fontWeight: "normal"
});

I'm using the latest version.

"@react-pdf/renderer": "^3.0.1",
Johannes Andersson
  • 15
  • 6

1 Answers1

0

This is works for me: In file style.ts:

import { Font } from "@react-pdf/renderer";
import { Style } from "@react-pdf/types";
import OpenSansRegular from "../../../public/fonts/OpenSans-Regular.ttf";
import OpenSansBold from "../../../public/fonts/OpenSans-Bold.ttf";

Font.register({
  family: "OpenSans",
  fonts: [
    {
      src: OpenSansRegular,
      fontWeight: 400,
    },
    {
      src: OpenSansBold,
      fontWeight: 700,
    }
  ]
});

export const pdfStyleSheet: Styles = {
  page: {
    fontFamily: "OpenSans",
    fontSize: "9px",
    lineHeight: 1.3,
  },
}

I use too "@react-pdf/renderer": "^3.0.1" and reactjs 17.0.2.

Elo
  • 226
  • 5
  • 19
  • Yes, this also worked for me. The issue was a conflict between the different dependencies in @react-pdf/renderer and the @react-pdf/font. I had to override different versions to get this to work, so it's a quite tricky solution :) – Johannes Andersson Nov 10 '22 at 08:55