JS Reports doesn't show the Chinese language properly

[shivanshurathore]

I have generated a PDF report with Handlebars, and it displays correctly for languages such as French, German, and Spanish. However, I am encountering display issues with the Chinese language fonts. It appears that these issues are linked to the local use of the Font Awesome .woff2 file, which is implemented to print icons in the report. If I exclude Font Awesome, the report displays the Chinese characters correctly.

Using a CDN fixes the display problem for Chinese characters, but my report must function offline without internet connectivity, so a CDN is not an option.

Could you please recommend any practical solutions to address this issue?

For reference, here is an example of the font issue:
ä½ è¢«å…³åœ¨ä¸€ä¸ªå° æˆ¿é—´é‡Œã€‚ä½ å¹¶ä¸ è®°å¾—å ‘ç”Ÿäº†ä»€ä¹ˆï¼Œä¹Ÿä¸ çŸ¥é “ä¸ºä»€ä¹ˆè¢«å…
³åœ¨è¿™é‡Œã€‚ä½ ä»¥å‰ ä»Žæˆ¿é—¨çš„çª—å £é‚£å„¿å¾—åˆ°é£Ÿç‰©ï¼Œä½†æ˜¯ä½ ç”¨åŠ›æ•²é—¨æˆ–è€…
å¤§å «éƒ½æ²¡æœ‰ç”¨ã€‚ä½ å†³å®šä¸€å®šè¦ é€ƒè·‘ï¼Œè¦ ä¸ ç„¶æƒ…å†µå ¯èƒ½ä¼šå ˜æ›´ä¸ å¥½ã€‚

[admin]

I'm not sure why the CDN should work differently. Can you check the profile tab with rendering debug logs? Isn't there some failing request or error from chrome mentioned?

[shivanshurathore]

All the fixed labels of reports mentioned in language files are being shown like this.

[shivanshurathore]

No failing request or error from Chrome is mentioned in the profile tab.

[admin]

Could you share a minimal demo with HTML? How do you install/link the font awesome?

[shivanshurathore]

I'm using this for CSS:
@font-face {
font-family: 'fa-solid-900';
src: url('{{{asset "/assets/fa-solid-900.woff2" "dataURI"}}}')
format('woff2');
}
.fa {
font-family: 'fa-solid-900';
font-style: normal;
}

Below is the example for HTML:
<div class="flex col">
{{#with data}}
<div class="flex row f-wrap w-full">
<div class="flex col b-1-4">
<div class="bold">{{@root.$localizedResource.orderNo}}</div>
<div>{{orderNo}}</div>
</div>
<div class="flex col b-1-4">
<div class="bold">{{@root.$localizedResource.itemNo}}</div>
<div>{{partNo}}</div>
</div>
<div class="flex col b-1-4">
<div class="bold">{{@root.$localizedResource.itemRev}}</div>
<div>{{partChg}}</div>
</div>
{{#if iconName}}
<div class="min-width">
<i class="fs-30 c-666 {{iconName}}"></i>
</div>
<div class="flex col b-1-4">
<div class="bold">{{@root.$localizedResource.location}}</div>
<div>{{location}}</div>
</div>
</div>
</div>

In this iconName is coming like 'fa fa-tv'

[shivanshurathore]

Here is the playground link
https://playground.jsreport.net/w/anon/yRdYw7Sz

[admin]

Seems you are missing proper charset in your HTML head
https://playground.jsreport.net/w/anon/nfINLojb

[shivanshurathore]

It worked.
Thanks

[shivanshurathore]

Hi @admin,
After production deployment it's printing like this

Its working fine in my local machine.

Is this possible any font issue on my production server?
Can you please help?

[admin]

You can try to install server fonts like here
https://github.com/jsreport/jsreport/blob/master/packages/worker/Dockerfile#L21

[shivanshurathore]

I have not installed any other font on my local machine. But it's working locally.