React-pdf: Custom fonts

[salzhrani]

Is it planned to add support for custom fonts? it is needed for stylistic reasons and to support non-latin languages.

[jbovenschen]

Thanks @salzhrani, Yes! this is something we plan to do in the short term.

[diegomura]

That's right. We are on it. Thanks!

[jbovenschen]

This is a proposal for the font API, what do you think @diegomura;

<Document
  fonts={[
    'fonts/Open-Sans-light.ttf', 
    'fonts/Open-Sans-light-Italic.ttf', 
    'fonts/Open-Sans.ttf', 
    'fonts/Open-Sans-Italic.ttf',
  ]}
>
  {/* Other stuff */}
</Document>

The main reason I put it as an property on the Document is that it is scoped per document.
So it wouldn't collide on module level when making multiple pdf's on a single web page.

[diegomura]

I don't know... I think we can hide that complexity to the user, and infer fonts from text styles directly.

So the Text element should call something like document.getOrCreateFont('Helvetica'), and the document should dynamically load it and save it, or retrieve it if it's already there.

That should save us predefining which fonts the document will use beforehand.

@jbovenschen what do you think?

[jbovenschen]

I think we can't hide that complexity for the user completely because we don't know the sources of every able font. PDF does only support a small subset of font's out of the box, so we need something where users can define sources for different fonts.

[diegomura]

Oh I see. You're right

Shouldn't be something like this then?

<Document
  fonts={[
   { fontFamily: 'OpenSans Light', src: 'fonts/Open-Sans-light.ttf' }
  ]}
>
  {/* Other stuff */}
</Document>

[jbovenschen]

We have two choices, use the postscript name and styles with are defined inside the font file, which is same as pdfkit treat custom font files.

Or make a web equivalent API where we define al the needed properties for the font file, like family, weight, style and others.

Don't have a really strong opinion about this one, what do you like the most @diegomura

[diegomura]

Don't have a strong opinion either. You can go with the option that most suits you.

However, what about something like:

StyleSheet.create({
  fontFamily: 'fonts/Open-Sans-light.ttf'
});

Would that be too much disruptive? I would like fonts to be the more pluggable as possible, and defining that 'fonts` prop it's kind against that.

[jbovenschen]

Was also thinking about this last night, what if we make something which matches more the web-api.

We could create a separate API for registering fonts.

Import { .Font } from '@react-pdf/core';

Font.register('fonts/Open-Sans-light.ttf', {
  family: '"Open-Sans", sans-serif',
  style: 'italic',
  weight: 'light'
});

Else it is pretty hard to guess the postscript name in some cases.

[diegomura]

Love this idea!
I think is the way to go. This will keep the <Document> props clean as I want them to be.
Good work!

[sebekgr]

How we can import fonts from google fonts or some cdn?

[itzsaga]

@sebekgr look at line 181 of the example in the REPL here: https://react-pdf.org/repl

[akshaybosamiya]

@sebekgr To import fonts from google fonts you can follow the below steps:

1. Select Google fonts reference link from fonts.google.com
   e.g., https://fonts.googleapis.com/css?family=Source+Sans+Pro

1. Open it into the browser.

2. You'll be able to find https://fonts.gstatic.com url
   e.g., https://fonts.gstatic.com/s/sourcesanspro/v11/6xK3dSBYKcSV-LCoeQqfX1RYOo3qNa7lqDY.woff2

[Fintasys]

@akshaybosamiya
I tried today all day to get japanese font running. I also tried your font
Demo
But it can't be rendered most of the time. Am I doing something wrong?

[akshaybosamiya]

Hi, @Fintasys

I checked your Demo link. But it isn't accessible.

Alternatively, till you provide a link try the below steps.

1. Open https://nikoskip.me/gfonts.php
2. Past Google Font link e.g., https://fonts.googleapis.com/css?family=Source+Sans+Pro
3. Click Get fonts! button

It'll provide you font woff/woff2 link. Please give a try for these steps.

[Fintasys]

@akshaybosamiya
sorry I changed the demo link, seems the link was too long

Also tried your script, seems unfortunately not to work with japanese supporting fonts 😅
I tried it with all from here:
https://fonts.google.com/?subset=japanese

Beside keifont from the react-pdf example I can't make any other japanese font work 😔

[akshaybosamiya]

@Fintasys ,

In your case, You'll have to paste the following link.
Link: https://fonts.googleapis.com/css?family=Noto+Sans+JP

You'll get the below links.

1. http://fonts.gstatic.com/s/notosansjp/v21/-F62fjtqLzI2JPCgQBnw7HFow2ou2HcP5pp0erwTqsSCpNtb5_OnUY4AN8I8f2ogPhktlh5UtNFs.119.woff2
2. http://fonts.gstatic.com/s/notosansjp/v21/-F62fjtqLzI2JPCgQBnw7HFYwQgJ.woff

[Fintasys]

@akshaybosamiya
I see thanks ! But still can't use them
Another Demo here, console says Error: Unknown font format
(Also had to replace http with https)

[emorling]

I have the same issue with woff2. Any ideas?

[diegomura]

Unfortunately only .ttf fonts are supported for the moment. I plan to support other formats but didn't have enough time to work on that and the rest of features

[Yerkewka]

Hello everyone. Can somebody help me with cyrillic font? I'm trying to use 'Roboto' or 'Open Sans', but the output is still not readable text. I'm using ttf format link from google. Got it from the link above, thankful for @akshaybosamiya .

[Dastnbek]

Same problem as @Yerkewka

[eugensunic]

Has anyone figured out how to use these fonts from an online source?

[DeepakKapiswe]

I'm also getting errors while using google Hindi fonts, Please help

[luishgranja]

I'm getting _Unhandled Rejection (Error): Unknown font format_ with Roboto .woff2 fonts and can't figure out a solution, at the end I just downloaded the font on Google Fonts (that are in ttf format), and registered them with a local source.

Font.register({ family: 'Roboto', src: 'path/roboto.ttf' });

If someone figured out how to use it from Google Fonts directly it will be sweet to show us the solution.

[DeepakKapiswe]

Finally I switched to pdfmake library which works great.