Support CID keyed fonts

wafinternational commented 2 years ago

I am trying to output Korean text on a pdf, but it shows as blank on the PDF. Upon inspecting with web inspect, the text is indeed included on the page but it is not displayed and has some weird character attached to it.

성명(한글) gets turned into 성က명(က한က글) .

I have tried everything to get this to work. I have added fonts / included different font families through CSS / added utf encoding as well. I also verified that this works on my local machine but when pushed to Heroku it has this problem. I am using Django. I also checked that without converting to PDF, the HTML page by itself has the proper Korean text displayed okay.

My only idea on why this is not working is that the PDF generation uses system fonts and those fonts do not exist on Heroku. (?)

liZe commented 2 years ago

Hello!

Here’s what I get using only your text in an HTML file: korean.pdf

So… It seems to work correctly.

My only idea on why this is not working is that the PDF generation uses system fonts and those fonts do not exist on Heroku. (?)

That’s probably the problem you have. You need to install fonts that include Korean characters, otherwise it won’t work. When you look distant pages on your computer with your browser, it uses the fonts on your computer, not the fonts on your server, that’s why it works.

You can also use @font-face rules referencing publicly-available fonts, if you can’t install fonts on Heroku.

wafinternational commented 2 years ago

So using @font-face with public google fonts fixed the weird character issue. However, they still do not display on the PDF. The tables are blank but when inspecting the text is there. Any other possible ideas?

liZe commented 2 years ago

Could you please share an HTML/CSS sample and the PDF you get?

wafinternational commented 2 years ago

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet"> 

        <style>
            @page {
                size: Letter;
                margin: 0.5in 0.5in 0.5in 0.5in;
            }

            @font-face {
                font-family: 'Noto Sans KR';
                font-style: normal;
                font-weight: 400;
                font-display: swap;
                src: url(https://fonts.gstatic.com/s/notosanskr/v25/PbykFmXiEBPT4ITbgNA5Cgm20xz64px_1hVWr0wuPNGmlQNMEfD4.0.woff2) format('woff2');
                unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19, U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6;
            }

            html {
                color: #14213d;
                font-size:9pt;
                line-height: 1.8;
                font-family: 'Noto Sans KR', sans-serif;
            }

            body {
                margin: 0;
                font-size:8pt;
                font-family: 'Noto Sans KR', sans-serif;
            }

            .top-left {
                float: left;
                width:469px;
            }

            .top-right {
                float:left;
                width:200px;
            }

            .info-table {
                border-collapse: collapse;
            }

            .info-table td, 
            .info-table th {
                border-style:solid;
                border-width: 0.5px;
                font-size:10px;
            }

            .insured-info {
                clear:both;
                border: solid 0.3px;
                text-align:center;
                font-weight:bold;
            }

            .insured-table {
                margin-bottom: 10px;
            }

            .header {
                margin-bottom:100px;
            }

        </style>
    </head>

    <body>
        <div class="header" style="margin-bottom: 120px;">
            <div class="top-left">

            </div>

            <div class="top-right">
                <table class="info-table" style="text-align: center;">
                    <thead>
                    </thead>
                    <tbody>
                        <tr>
                            <td style='width:110px;'>Report Date</td>
                            <td style='width:135px;'>{% now YY/m/dd%}</td>
                        </tr>
                        <tr>
                            <td style='width:110px;'>Claim #</td>
                            <td style='width:135px;'></td>
                        </tr>
                        <tr>
                            <td style='width:100px;'>PRM #</td>
                            <td style='width:135px;'></td>
                        </tr>
                        <tr>
                            <td style='width:100px;'>Claim Analyst</td>
                            <td style='width:135px;'></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="insured-info">
            피보험자 정보
        </div>

        <div class="insured-table">
            <table class="info-table" style="text-align: center;">
                <thead>
                </thead>
                <tbody>
                    <tr>
                        <td style='width:100px;'>성명(한글)</td>
                        <td style='width:254px;'></td>
                        <td style='width:100px;'>주민번호</td>
                        <td style='width:254px;'></td>
                    </tr>
                    <tr>
                        <td style='width:100px;'>성명(영문)</td>
                        <td style='width:200px;'></td>
                        <td style='width:100px;'>증귄번호</td>
                        <td style='width:135px;'></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

document.pdf

I'm not sure if I did the font-face correctly. Thanks for your assistance.

liZe commented 2 years ago

The bug appears because Google Fonts returns a CID keyed font, and they’re not supported by WeasyPrint. Using a more common font (such as the one installed on your computer) works, and is the best workaround now.

wafinternational commented 2 years ago

That was indeed the issue. I just exported a font from Windows and it displays correctly. However, trying to set a bold / bigger font-weight works on my local development but does not work when I push to my server. Is this a similar issue with fonts? Let me know if I should open a new issue. Thanks!

Kozea / WeasyPrint

Support CID keyed fonts #1593