I was using '@react-pdf/renderer' to create a pdf and download it but I could not find a way to support multiple languages with it. That is one pdf file could have strings in multiple languages but with '@react-pdf/renderer' it would always have tofu characters while viewing the pdf and when downloading it.

What can I use as an alternative?

How I set up the fonts currently that did not work

import NotoSansMedium from '../assets/fonts/noto/NotoSans-Medium.ttf';
import NotoSansArabic from '../assets/fonts/noto/NotoSansArabic-Medium.ttf';
import NotoSansHebrew from '../assets/fonts/noto/NotoSansHebrew-Medium.ttf';
import NotoSansJP from '../assets/fonts/noto/NotoSansJP-Medium.ttf';
import NotoSansKR from '../assets/fonts/noto/NotoSansKR-Medium.ttf';
import NotoSansSC from '../assets/fonts/noto/NotoSansSC-Medium.ttf';
import NotoSansTC from '../assets/fonts/noto/NotoSansTC-Medium.ttf';

Font.register({
    family: 'NotoUniversal',
    fonts: [
      { src: NotoSansMedium, fontWeight: "medium" },
      { src: NotoSansArabic, fontWeight: 'medium' },
      { src: NotoSansHebrew , fontWeight: 'medium'},
      { src: NotoSansJP, fontWeight: "medium" },
      { src: NotoSansKR, fontWeight: 'medium' },
      { src: NotoSansSC, fontWeight: "medium" },
      { src: NotoSansTC, fontWeight: "medium" },
    ]
})

I was using '@react-pdf/renderer' to create a pdf and download it but I could not find a way to support multiple languages with it. That is one pdf file could have strings in multiple languages but with '@react-pdf/renderer' it would always have tofu characters while viewing the pdf and when downloading it.

What can I use as an alternative?

How I set up the fonts currently that did not work

import NotoSansMedium from '../assets/fonts/noto/NotoSans-Medium.ttf';
import NotoSansArabic from '../assets/fonts/noto/NotoSansArabic-Medium.ttf';
import NotoSansHebrew from '../assets/fonts/noto/NotoSansHebrew-Medium.ttf';
import NotoSansJP from '../assets/fonts/noto/NotoSansJP-Medium.ttf';
import NotoSansKR from '../assets/fonts/noto/NotoSansKR-Medium.ttf';
import NotoSansSC from '../assets/fonts/noto/NotoSansSC-Medium.ttf';
import NotoSansTC from '../assets/fonts/noto/NotoSansTC-Medium.ttf';

Font.register({
    family: 'NotoUniversal',
    fonts: [
      { src: NotoSansMedium, fontWeight: "medium" },
      { src: NotoSansArabic, fontWeight: 'medium' },
      { src: NotoSansHebrew , fontWeight: 'medium'},
      { src: NotoSansJP, fontWeight: "medium" },
      { src: NotoSansKR, fontWeight: 'medium' },
      { src: NotoSansSC, fontWeight: "medium" },
      { src: NotoSansTC, fontWeight: "medium" },
    ]
})

• reactjs
• pdf
• react-pdf

• @KJ That's how i set up multiple fonts but it didn't work – Zephyr Commented Mar 24 at 11:32
• @KJ How will one pdf display all the lang characters if there are multiple font files? – Zephyr Commented Mar 24 at 12:15

1 Answer 1

React PDF has a testbed for testing your design so it is just like many others easy to test CSS without PDF programming. https://react-pdf./repl?example=emoji

Here I have simply shown two font styles as numerically unique and in fact they both error on some characters as a mixed CJK font.

In production you will need to use well built local accessible fonts. Also beware you also need "English" font assignments for embedding the Latin characters as only those registered are imbedded in the PDF.

const F1 = "https://fonts.gstatic/ea/notosansjapanese/v6/NotoSansJP-Bold.woff";
const F2 = "https://fonts.gstatic/ea/notosansjapanese/v6/NotoSansJP-Thin.woff";

Font.register({ family: 'JP1', src: F1 });
Font.register({ family: 'JP2', src: F2 });

const styles = StyleSheet.create({
  container: {

    height: 700,
    marginVertical: 70,
    marginHorizontal: "10%"
  },
  text1: {
    fontFamily: 'JP1',
    fontSize: 20,
    textAlign: 'center'
  },
    text2: {
    fontFamily: 'JP2',
    fontSize: 25,
    textAlign: 'center'
  }
});