Bold font sometimes work but sometimes doesn't

henrythc commented 1 month ago

Hi, I have imported two fonts in my html, one is regular calibri another is bold calibri. <body> tag is using the regular calibri, then a class (.ca-bold) is using the bold one. The .ca-bold is applied to an element. However, that element is sometimes bold, but not always. The footer is sometimes bold as well, even if I have not set it to be bold. Besides, when I set <body> tag to use bold calibri, all elements are bold all the time. What am I doing wrong? Thank you very much. I am using weasyprint 62.0

HTML

<!DOCTYPE html>

<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="UTF-8">
    <style>
        @page {
            size: a4 portrait;
            margin: 10mm;
        }

        @font-face {
            font-family: 'myCalibri';
            src: url("https://path/calibri_regular.ttf");
        }

        @font-face {
            font-family: 'myCalibri-Bold';
            src: url("https://path/calibri_bold.ttf");
        }

        @page {
            @bottom-left {
                content: "FRG Application Form";
                font-size: 10pt !important;
                font-family: 'myCalibri';
            }

            @bottom-right {
                content: "page " counter(page) " of " counter(pages);
                font-size: 10pt !important;
                font-family: 'myCalibri';
            }
        }

        body {
            font-size: 12pt;
            font-family: 'myCalibri';
        }

        .ca-bold {
            font-family: 'myCalibri-Bold';
        }
    </style>
</head>

<body>
    <header>
        <div class="text-end">(Form updated Mar 2023)</div>
        <div class="d-flex justify-content-end">
            <div class="border py-1 px-2">Ref No:</div>
            <div class="border py-1 px-2" style="width:100px">TEST</div>
        </div>
        <div id="form-name" class="ca-bold">
            Faculty Research Grant
        </div>
    </header>
</body>

</html>

css:


#form-name {
    text-align: center !important;
    font-size: 27px !important;
    color: #198754 !important;
    font-weight: bold !important
}

code:

        BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
        template_path = BASE_DIR + "/templates/pdf_202403.html"
        css = BASE_DIR + "/static/frg_dg/pdf_frg_dg.css"

        font_config = FontConfiguration()

        pdf_file_type = ".pdf"
        pdf_file = DjangoNamedTemporaryFile(suffix=pdf_file_type, delete=False)
        pdf_path = pdf_file.name

        HTML(template_path).write_pdf(
            pdf_path,
            stylesheets=[css],
            font_config=font_config,
        )

log

INFO Step 1 - Fetching and parsing HTML - /app/templates/faculty_research_grant/pdf_202403.html
INFO Step 2 - Fetching and parsing CSS - CSS string
INFO Step 2 - Fetching and parsing CSS - CSS string
INFO Step 3 - Applying CSS
INFO Step 4 - Creating formatting structure
INFO Step 5 - Creating layout - Page 1
INFO Step 6 - Creating PDF
INFO Step 7 - Adding PDF metadata

schneebuzz commented 1 month ago

Try upgrading to yesterday's release v62.1. It fixes #2144 and #2149 which caused the same issue for me. It's now gone with the new release.

henrythc commented 1 month ago

Try upgrading to yesterday's release v62.1. It fixes #2144 and #2149 which caused the same issue for me. It's now gone with the new release.

Thank you!!!!!! I started using this amazing library just few hours before the release of v62.1 and this issue confused me a lot lol

Kozea / WeasyPrint

Bold font sometimes work but sometimes doesn't #2150