CODEWITHSUNDEEP
reactjswebpackreact-pdf
Ajil Paul
Ajil Paul

Reputation: 375

How to add custom font in react-pdf/pdf

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

Upvotes: 13

Views: 30026

Answers (3)

Rachel Cantor
Rachel Cantor

Reputation: 336

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

Upvotes: 0

Việt
Việt

Reputation: 41

This worked for me!

Put custom fonts at public folder

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

Upvotes: 3

Andres Diaz Lopez
Andres Diaz Lopez

Reputation: 602

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

Upvotes: 30

Related Questions