i18n support for different fonts

[ddx-510]

Is your feature request related to a problem? Please describe. I am currently using this library for a multi-language platform. So when doing the i18n support, I found it quite troublesome to find a suitable font and then load it accordingly. Describe the solution you'd like Is it possible for the library to have a more variety of build-in font support for different languages.

[ddx-510]

Currently I am using a workaround to fix the issue, so I have a dynamic font loader

export const LocalizationLoad = (currentLocale: string) => {
  switch (currentLocale) {
    case LanguageEnum.EN_US:
      Font.register({
        family: 'NotoSans',
        src: 'https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A99d.ttf',
      })
      return 'NotoSans'
    case LanguageEnum.ZH_CN:
      Font.register({
        family: 'NotoSansSC',
        src: 'https://fonts.gstatic.com/s/notosanssc/v37/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYw.ttf',
      })
      return 'NotoSansSC'
    case LanguageEnum.TH_TH:
      Font.register({
        family: 'NotoSansThai',
        src: 'https://fonts.gstatic.com/s/notosansthai/v25/iJWnBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcd1MKVQt_So_9CdU5RtpzE.ttf',
      })
      return 'NotoSansThai'
    case LanguageEnum.JA_JP:
      Font.register({
        family: 'NotoSansJP',
        src: 'https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFBEj75s.ttf',
      })
      return 'NotoSansJP'
    default:
      return 'Helvetica'
  }
}

Then in my main component, I use document.documentElement.lang as a dependency and trigger my LocalizationLoad dynamically in useEffect hooks.

But this method is not perfect, I cannot have two languages in the same pdf file which is a big feature I would like to have... Anyone can solve this issue?

[ddx-510]

Oh for anyone who has encountered the same issue, this issue is actually solved in font callback pr, just that the type is not being updated, and it is not mentioned in the doc, https://github.com/diegomura/react-pdf/pull/2727.

The type is fixed in this pr and we can use font callback now yey! just @ts-ignore the fontFamily types and pass in an array of fonts

So in my case I can just return

 Font.register({
        family: 'NotoSans',
        src: 'https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A99d.ttf',
      })
 Font.register({
        family: 'NotoSansSC',
        src: 'https://fonts.gstatic.com/s/notosanssc/v37/k3kCo84MPvpLmixcA63oeAL7Iqp5IZJF9bmaG9_FnYw.ttf',
      })
  Font.register({
        family: 'NotoSansThai',
        src: 'https://fonts.gstatic.com/s/notosansthai/v25/iJWnBXeUZi_OHPqn4wq6hQ2_hbJ1xyN9wd43SofNWcd1MKVQt_So_9CdU5RtpzE.ttf',
      })
 Font.register({
        family: 'NotoSansJP',
        src: 'https://fonts.gstatic.com/s/notosansjp/v53/-F6jfjtqLzI2JPCgQBnw7HFyzSD-AsregP8VFBEj75s.ttf',
      })
return ['NotoSans', 'NotoSansSC', 'NotoSansThai', 'NotoSansJP']