Japanese Characters in PDF

Printing HTML containing Japanese characters via the @journeyapps/pdf-reports npm package shows either no text or unicode square place holder characters.

A code example would be

    const html = 
<!doctype html>
    <meta charset="utf-8">       
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+JP">
        .serif_font {
            font-family: "Helvetica Neue",Arial,sans-serif,"Segoe UI Symbol"

        .noto_font {
            font-family: 'Noto Sans JP', serif;

    <p>No class: 連載</p>
    <p class="serif_font">Serif Font class: 連載</p>
    <p class="noto_font">Noto Font class: 連載</p>
    <div>Some random div text</div>

    const pdf_result = await pdf.generatePdf({ html: html });

The output looks like:

This was solved by adding a Google font which supports the Japanese characters.

In the HTML the following was added to the head

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=block" rel="stylesheet">
<style type="text/css"> * {font-family: 'Noto Sans','Noto Sans TC','Noto Sans SC'; font-display: block;}</style>  

Be sure to add the font-display: block; CSS property when using webfonts.

1 Like