I had this issue as well. I was able to resolve it by importing the font file as a variable then using that as the src value.

import font from "./font.ttf"

Font.register({
  family: "FamilyName",
  format: "truetype",
  src: font 
});


const styles = StyleSheet.create({
  page: {
    fontFamily: "FamilyName",
  },
 });

this worked for me.

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

After doing a lot of research this one works for me. Add:

"@react-pdf/renderer":" 2.1.0",
"@react-pdf/font": "2.2.0",
To your package.json dependencies.

Then below dependencies add:

"resolutions": {
    "@react-pdf/font": "2.2.0"
  },

If you already have a resolutions object you'll just need to add this version to it. Notice there is no ^ in the version number.

Then remove yarn.lock or package-lock.json and re-run yarn/npm install