React-pdf: Custom font loading issue

[sebekgr]

OS:
Linux

React-pdf version:
"@react-pdf/renderer": "1.0.0-alpha.18"

Description:
I have a problem with load custom font.
In docs we can read "Specifies the source of the font. This can either be a valid URL, or an absolute path if you're using react-pdf on Node."

So in first approach i tried include font from google font
https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu72xKOzY.woff2
but this format is not support.
So in second approach I tried upload Roboto font in tff format to my private hosting but in DEMO code there was some message about mix content http/https .. so I upload font into github which has https protocol.

Also I tried served locally font in my react app but there is message error:
" No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3005' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

I built local server for serving font with enabled cors but it doesn't work

I provide react demo where I tried generate pdf with some custom pdf.
https://codesandbox.io/s/5k72n7zq2n

I think there is a problem with fetch method. Exactly in file react-pdf.browser.es.js with
fetchFont method

var fetchFont = function fetchFont(src) {
return fetch(src).then(function (response) {
if (response.buffer) {
return response.buffer();
}
return response.arrayBuffer();
}).then(function (arrayBuffer) {
return Buffer.from(arrayBuffer);
});
};
I think that fetch method should include some headers and cors mode for fetching successfully any resources

So the final questions is:
How do I use some custom font ?

[jasonbarry]

I have the same question. I haven't been able to use a custom font successfully. It would be helpful to know what font types are supported (.otf, .ttf, .woff, etc) and how to fetch them via URL without running into CORS issues (both during development and in production).

[emorling]

The React PDF Playground has a link to
https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf

Does anyone know if these TTF links exist for all Google Fonts?

[diegomura]

Nope. Not sure if they do. Sorry

[diegomura]

@emorling I recently came across to this repo https://github.com/google/fonts that has all the google fonts in .ttf format

[diegomura]

@jasonbarry Only .ttf fonts supported for the moment

[diegomura]

Closing this since all points had been cleared

[marticorena]

The React PDF Playground has a link to
https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf

Does anyone know if these TTF links exist for all Google Fonts?

Here you cant find a similar link to all google fonts:
https://gist.github.com/sadikay/d5457c52e7fb2347077f5b0fe5ba9300

[adamdune]

@jasonbarry Only .ttf fonts supported for the moment

I think this information would be valuable in the docs. 😃

[earthnoob]

Are WOFF/WOFF2 formats supported? I've been trying to import both in files and from Google Font CDN links but to no avail.

[moparlakci]

Any known issues when using docker? On development it works fine. But on my production environment, with docker alpine linux it doens't show some of the text. I am using flex to style the items but as I said it works fine on dev.

see screenshots