Custom Fonts - Unicode garbled with chrome-pdf



  • Playground Reproduction: https://playground.jsreport.net/w/dfaivre/DugBMIlv

    If I use an external font loaded as an asset:

    @font-face {
            font-family: 'Montserrat-Regular';
            src: url({#asset /Montserrat-Regular.woff2 @encoding=dataURI});
            format('woff2');
    }
    

    and render to chrome-pdf then any unicode output characters are invalid (for both elements that use the custom font and elements that use the default font).

    (Unicode input characters: €$£ áñè Среднее)
    0_1609963804290_upload-68454a0b-a43b-4a2b-8a71-cdb2f9327b48

    • If I render to html-with-browser-client then it works.
    • If I render to html-with-browser-client in a new window then it doesn't work (same output as chrome-pdf)
    • If I remove the @font-face entirely and just use default, preview panel rendering works but "new window" rendering is still garbled.

    Adding explicit utf-8 charset encoding to the template makes both chrome-pdf and new window html-with-browser-client work

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    </head>
    
    • If this is the only work around - is there a way to specify utf-8 encoding for all my templates, or does it need to be added to each template manually?
    • Is there another way to load the custom font file?


  • You can add a global jsreport script that prepends the meta to the template. But it looks like to me its better to just edit your templates and add proper meta to HTML head.

    function beforeRender(req, res) {
      req.template.content = `<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    </head>` + req.template.content
    }
    

Log in to reply
 

Looks like your connection to jsreport forum was lost, please wait while we try to reconnect.