FontFamily with different fonts

[cnotario]

Describe the bug
I have a pdf which could have more than 1 languages at the same time. For example Japanese and Arabic but the language files are separated. I am receiving the following error:

Error: Font family not registered: NotoSansArabic, NotoSansJap. Please register it calling Font.register() method

To Reproduce

I have registered the fonts and I add them in the property fontFamily style

import NotoSansJapBold from '../../../fonts/NotoSansJapNotoSansJap-Bold.ttf'
import NotoSansJapItalic from '../../../fonts/NotoSansJap/NotoSansJap-Italic.ttf'
import NotoSansJapLight from '../../../fonts/NotoSansJap/NotoSansJap-Light.ttf'
import NotoSansJapRegular from '../../../fonts/NotoSansJap/NotoSansJap-Regular.ttf'

import NotoSansArabicBold from '../../../fonts/NotoSansArabic/NotoSansArabic-Bold.ttf'
import NotoSansArabicItalic from '../../../fonts/NotoSansArabicNotoSansArabic-Italic.ttf'
import NotoSansArabicLight from '../../../fonts/NotoSansArabic/NotoSansArabic-Light.ttf'
import NotoSansArabicRegular from '../../../fonts/NotoSansArabic/NotoSansArabic-Regular.ttf'


Font.register({
        family: 'NotoSansArabic', //Arabic
        fonts: [
            {
                src: NotoSansArabicBold
            },
             {
                src: NotoSansArabicItalic
            },
           {
                src: NotoSansArabicLight
            },
           {
                src: NotoSansArabicRegular
            },
        ]
    },
)
Font.register({
    family: 'NotoSansJap', //Japanese Font,
    fonts: [
        {
            src: NotoSansJapBold
        },
        {
            src: NotoSansJapItalic
        },
        {
            src: NotoSansJapLight
        },
        {
            src: NotoSansJapRegular
        }
    ]
})

 const richTextStyle = {
              fontFamily: 'NotoSansArabic, NotoSansJap',
           }
<Text key={index} style={{...richTextStyle}}>{formattedText}</Text>

Expected behavior
I would like to add two fonts in fontFamily property because I have 2 different language files

Desktop (please complete the following information):

• OS: MacOS
• Browser chrome
• React-pdf version "@react-pdf/renderer": "^2.0.12"

[carlobeltrame]

I think you have to register the fonts before any PDF related component is rendered. So in the file that creates the <Document> node, or even further up, in a file that imports any other PDF related components.

[cnotario]

I think you have to register the fonts before any PDF related component is rendered. So in the file that creates the <Document> node, or even further up, in a file that imports any other PDF related components.

I think you have to register the fonts before any PDF related component is rendered. So in the file that creates the <Document> node, or even further up, in a file that imports any other PDF related components.

Thanks for your response. The registered font was declared before the tag Document. My example is only a part of the code to explain the issue. In fact, it works with 1 font as this example:

const richTextStyle = {
              fontFamily: 'NotoSansJap',
           }
<Text key={index} style={{...richTextStyle}}>{formattedText}</Text>

I don't know if it could be possible to add two fonts.

[carlobeltrame]

Right, got it, thanks for the clarification. So then this issue looks to me like a duplicate for #499 as well as #933?