Font use guide

[adsee42]

Is your feature request related to a problem? Please describe.
It took me 3 days to figure out how to use a no-latin font. (Japanese)

I know this is not a valid feature request, but for those who struggled too, I would like to share how I managed to make it work.

Describe the solution you'd like
Maybe a README listing all tested working fonts for every kinds of languages.

Describe alternatives you've considered
This is what I did:
tldr:
To render japanese, use Nasu or 源真ゴシック

// Font.register({
//   family: "Nasu",
//   src: `${FONT_PATH}/Nasu-Regular.ttf`,
// });
Font.register({
  family: "源真ゴシック",
  fonts: [
    { src: `${FONT_PATH}/genshingothic/GenShinGothic-P-ExtraLight.ttf`, fontWeight: 200 },
    { src: `${FONT_PATH}/genshingothic/GenShinGothic-P-Light.ttf`, fontWeight: 300 },
    { src: `${FONT_PATH}/genshingothic/GenShinGothic-P-Regular.ttf`, fontWeight: 400 },
    { src: `${FONT_PATH}/genshingothic/GenShinGothic-P-Medium.ttf`, fontWeight: 500 },
    { src: `${FONT_PATH}/genshingothic/GenShinGothic-P-Bold.ttf`, fontWeight: 700 },
    { src: `${FONT_PATH}/genshingothic/GenShinGothic-P-Heavy.ttf`, fontWeight: 900 },
  ],
});

more details:

1. I would like to have a monospaced latin font and a somewhat nice-looked japanese font.
   Of course the default Roboto did not work. Japanese characters are all garbled.
2. I searched for issues of this repository, tried all solutions other people mentioned, and none worked for me.
3. I searched for japanese monospace font, and found this post: https://qiita.com/wheatandcat/items/73b1452bd92f831334e7
   And I tried the Nasu he used in his code, and it worked!
4. But the numbers were not look like what I wanted, so the searching continued.
5. After trying Noto Sans, which mentioned in other issues, I also tried Noto Sans CJK JP, Source Han Sans, downloading the default .otf, searching for and downloading .ttf, but none of those worked.
6. And the search kept going. Then I found 源真ゴシック mentioned above. Did not expect it to work, but it worked like a charm.

By the way, when using Font.register to register custom fonts, you can not have both PDFViewer and BlobProvider in same page.(at least in my environment)

That's all. If you guys know any other working fonts for any other languages, please share it here (or somewhere else that's ok for this kind of content).

[DewangS]

Thanks for the guide though in my case I can't even register Google Roboto fonts. I tried both ways i.e. using the downloaded TTF files from my server and also using the gstatic link. I keep getting unknown Font format, not sure what to do and there isn't any active help from anyone.

[adsee42]

@DewangS
If it's "unknown Font format", then it's not the font path or internet problem.
Maybe try other fonts until some fonts work?
What's the language by the way?

[DewangS]

just plain English. Irony is that they do have sample code on react-pdf.org site for the Roboto font but without the source location .... see below. One need to figure out what should be the value for the src: .. would've been nice to see some working example. I am also stuck with the ReactPDF.render() method. it just fails to render. I can use the same in and it renders doco though with some weird sizing details... e.g. 85 x 112 on the top left corner of each element which is not I want.

import { StyleSheet, Font } from '@react-pdf/renderer'

// Register font
Font.register({ family: 'Roboto', src: source });

// Reference font
const styles = StyleSheet.create({
  title: {
    fontFamily: 'Roboto'
  }
})

[t6adev]

Hi, I'm also facing same issue that generated pdf was garbled to render Japanese font.
I just got results below:
Succeeded

Font.register({
  family: "jpFont",
  src:
    "https://github.com/wheatandcat/react-curriculum-vitae/raw/master/src/fonts/Nasu-Regular.ttf",
});

Failed

Font.register({
  family: "jpFont",
  src: "https://github.com/googlefonts/noto-cjk/raw/master/NotoSansCJKjp-Regular.otf",
})

These code are run in Node.js(v10) on MacOS. I haven't know what's the difference yet.

[t6adev]

I found these issue.
foliojs/fontkit#23
foliojs/pdfkit#472

Then, He said it.
foliojs/fontkit#207 (comment)

I'm not sure those are actual problems.
react-pdf uses forked pdfkit and fontkit ( https://github.com/diegomura/react-pdf/blob/master/package.json#L27,L28 ).
So I can not try easily to get what's the garbled problem.
What do you think? @diegomura

[diegomura]

Thanks for all this data! Closing this since as you said it's not really an issue but hope it helps others in the future