Open crowbait opened 3 weeks ago
After too much experimentation I could determine that fontFamily
is not applied (or the font not actually loaded) if the font is only used in a conditional render callback.
Example:
<View id="header-content" render={({pageNumber}) => {
if (pageNumber === 1) return (
<Text style={{fontFamily: 'only-used-here'}}>Special</Text>
);
return (
<Text>Standard font used in the rest of the document (can be registered from ttf just fine)</Text>
);
</View>
<Text>Other Content</Text>
In the example above, "Special" will fall back to the global default font. Not the one specified in a higher View
or the Page
, but (in my case) Helvetica.
Now, if we add an element to the tree which is rendered the normal way (without render callback), it works:
<View id="header-content" render={({pageNumber}) => {
if (pageNumber === 1) return (
<Text style={{fontFamily: 'not-only-used-here'}}>Special</Text>
);
return (
<Text>Standard font used in the rest of the document (can be registered from ttf just fine)</Text>
);
</View>
<Text>Other Content</Text>
<Text style={{fontFamily: 'not-only-used-here'}}>Special</Text>
As a workaround, it should be noted that the element doesn't have to be visible:
...
<Text>Other Content</Text>
<Text style={{fontFamily: 'not-only-used-here', color: '#ffffff'}}>Special</Text>
I'm registering two fonts, one is a logo type and the other is the font I want to use for the document body.
However, while the logo type works well, I think the other one is not (it's a bit difficult to tell because it doesn't look very different from the default one). Also, setting the fontWeight doesn't work at all - I have already tried the previously suggested solutions of specifiying the fontFamily alongside the fontWeight in inline styles and downgrading to
"@react-pdf/layout": "3.11.5", "@react-pdf/renderer": "3.4.2",
.I've also tried using another FontFamily for bold text with no success: