Loading and registering fonts is broken

Describe the bug When attempting to load the source of a font, locally or from an external URL, an error comes back as Error: Unknown font format like in your example here

https://react-pdf.org/repl?example=font-register

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

1. Register a font
2. See console errors & failure to load the doc

Expected behavior Fonts are loaded successfully and applied to the document.

Screenshots

[igolden]

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 
});

[heyalexchoi]

I am also unable to register fonts. code:

Font.register({ family: 'SourceSansPro', fonts: [
 { src: 'https://fonts.gstatic.com/s/sourcesanspro/v14/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lujVj9_mf.woff2' }, // font-style: normal, font-weight: normal
 { src: 'https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rwmhdu3cOWxy40.woff2', fontWeight: 600 },
]});

code, variation 2:

Font.register({ family: 'SourceSansPro', fonts: [
 { src: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap' }, // font-style: normal, font-weight: normal
 { src: 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@600&display=swap', fontWeight: 600 },
]});

console:

Error: Unknown font format
    at Object../node_modules/@react-pdf/fontkit/dist/fontkit.browser.es.js.fontkit$1.create (fontkit.browser.es.js:68)
    at FontSource._callee2$ (react-pdf.browser.es.js:2892)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at asyncGeneratorStep (asyncToGenerator.js:3)
    at _next (asyncToGenerator.js:25)

UPDATE: I was able to get fonts to work using a .ttf url. If you’re using a google font you can do this by curling the google font url

➜  resume-builder-site git:(master) ✗ curl https://fonts.googleapis.com/css2\?family\=Source+Sans+Pro:wght@600\&display\=swap
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'), url(https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rAkA.ttf) format('truetype');
}

Taking the .ttf url that comes back, and put that into the src

Font.register({ family: 'SourceSansPro', fonts: [
 { src: 'https://fonts.gstatic.com/s/sourcesanspro/v14/6xK3dSBYKcSV-LCoeQqfX1RYOo3aPw.ttf' }, // font-style: normal, font-weight: normal
 { src: 'https://fonts.gstatic.com/s/sourcesanspro/v14/6xKydSBYKcSV-LCoeQqfX1RYOo3i54rAkA.ttf', fontWeight: 600 },
]});