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

Impersonalize

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',
    },
  ],
});

Epileptic

Your second approach kinda worked for me, but I did not play with URLs; I only fetched whole families from Google Api Fonts, filtered down to what I needed, and used URL as a source for Font. register() – Pepperandsalt

2 worked perfectly, nice one! – Incisure

2nd way works like magic! – Sunwise

The second worked like a charm! After almost 4hours of trying to get the font to work! – Kalli

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',
  }
 })

Latreese

This worked for my use-case, except we needed to do a near-full path like src/public/fonts/MyFont.ttf – Scutari

Answer 3

For some reason, using create react app with typescript kept on giving me issues including it (even as a variable) because it couldn't resolve the type. I ended up resolving it by using a require to include the font.

import { Font } from '@react-pdf/renderer';

export const registerFonts = () => {
    Font.register({
        family: 'DM Sans', fonts: [
            { src: require('./DMSans/static/DMSans-Regular.ttf'), fontWeight: 'normal' },
            { src: require('./DMSans/static/DMSans-Bold.ttf'), fontWeight: 'bold' },
        ]
    })
    Font.register({
        family: 'Roboto Slab', fonts: [
            { src: require('./RobotoSlab/static/RobotoSlab-Regular.ttf'), fontWeight: 'normal' },
            { src: require('./RobotoSlab/static/RobotoSlab-Bold.ttf'), fontWeight: 'bold' },
        ]
    });
}

Bossy