How to add custom font in react-pdf/pdf

Question

Can anyone say how to add custom font with @react-pdf/pdfkit in react.js?

I tried to use doc.registerFont(path, font_family) But its showing an error like Unhandled Rejection (Error): fontkit.openSync unavailable for browser build

Can anyone help me? I dont want to render the pdf. Instead I am trying to create and download it. So I cant use react-pdf/renderer. Thats why I used react-pdf/pdfkit

Answer 1

1. in my case, I import the fonts as normal and it works. You can download the google fonts here . However, it is probably that you have to set up the webpack configuration.

    import FontUbuntuRegular from './styles/pdfFonts/ubuntuRegular.ttf';
    import FontUbuntuItalic from '.7styles/pdfFonts/ubuntuItalic.ttf';
    import FontUbuntu700 from './styles/pdfFonts/ubuntu700.ttf';
    
    Font.register({
      family: 'Ubuntu',
      fonts: [
        {
          src: FontUbuntuRegular,
        },
        {
          src: FontUbuntuItalic,
          fontWeight: 'bold',
        },
        {
          src: FontUbuntu700,
          fontWeight: 'normal',
          fontStyle: 'italic',
        },
      ],
    });

2. (RECOMMENDED) EASY, and simple, NO webpack configuration.

I found another way to add the src, it was to look for the Webfont.

1. I had to scroll to make an API call with sort by ALPHA (alphabetic ordered) Google Api Fonts click Here to look for your font image example.
2. I scrolled and founded image example
3. I added manually the "S" to HTTP. before ("http://... ")=> after("https://...").
4. I added to my code easily, and it is working perfectly.

Font.register({
  family: 'Ubuntu',
  fonts: [
    {
      src: 'https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf7EuStkm20oJA.ttf',
    },
    {
      src: 'https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf7EuStkm20oJA.ttf',
      fontWeight: 'bold',
    },
    {
      src: 'https://fonts.gstatic.com/s/questrial/v13/QdVUSTchPBm7nuUeVf7EuStkm20oJA.ttf',
      fontWeight: 'normal',
      fontStyle: 'italic',
    },
  ],
});

Answer 2

This worked for me!

Font.register({
  family: 'Roboto',
  fonts: [
    {
      src: '/fonts/Roboto-Regular.ttf',
      fontWeight: 400,
    },
    {
      src: '/fonts/Roboto-Bold.ttf',
      fontWeight: 700,
    }
  ]
})

const styles = StyleSheet.create({
  page: {
    fontFamily: 'Roboto',
  }
 })