WeasyPrint: Font weights missing when using @font-face rules

Hey!

Awesome project here - spectacular work.

Unfortunately, I’ve run into an issue with font-weights and I can’t seem to resolve it. I’m working with a font that has several weights available (400, 500, 700), but the 500 weight does not appear to be used in the pdf output of WeasyPrint. It seems to fall back to the 400. When I open an HTML document in Chromium/Firefox, the 500 weight font is definitely rendering. I’ve gone through the older issues related to font, but didn’t come across anything that seemed to be related.

I’ve downloaded these three fonts:

and placed them in a /fonts folder. This is the HTML/CSS I’m using:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        @font-face {
            font-family: "Roboto";
            font-style: normal;
            font-weight: 400;
            src: url(fonts/Roboto-Regular.otf) format("opentype");
        }

        @font-face {
            font-family: "Roboto";
            font-style: normal;
            font-weight: 500;
            src: url(fonts/Roboto-Medium.otf) format("opentype");
        }

        @font-face {
            font-family: "Roboto";
            font-style: normal;
            font-weight: 700;
            src: url(fonts/Roboto-Bold.otf) format("opentype");
        }

        p:before {
            content: 'Bacon ipsum dolor amet sausage rump tongue';
        }

        body {
            font: 16px serif;
        }

        .normal {
            font-family: 'Roboto';
            font-weight: 400;
        }

        .medium {
            font-family: 'Roboto';
            font-weight: 500;
        }

        .bold {
            font-family: 'Roboto';
            font-weight: 700;
        }
    </style>
</head>
<body>
<p></p>
<p class="normal"></p>
<p class="medium"></p>
<p class="bold"></p>
</body>
</html>

And here’s the output of weasyprint -i:

System: Linux
Machine: x86_64
Version: #34~18.04.2-Ubuntu SMP Thu Oct 10 10:36:02 UTC 2019
Release: 5.0.0-32-generic

WeasyPrint version: 51
Python version: 3.7.4
Cairo version: 11510
Pango version: 14014
CairoSVG version: 2.4.2

Thanks in advance!

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 19 (9 by maintainers)

Commits related to this issue

Fix Fontconfig font-weight matching According to what I can understand of Fontconfig’s code, using constants and integer values should give the same result. Obviously, it doesn’t. Using integers wor... — committed to Kozea/WeasyPrint by liZe 2 years ago

Most upvoted comments

You should see warnings like that:

Ignored `src: url("Tillana-Regular.ttf") format("truetype")` at 6:5, Relative URI reference without a base URI: 'Tillana-Regular.ttf'.

Alas, provide a base_url, e.g.:

import os
# base_url = '.' would probably do, too
base_url = os.path.dirname(os.path.abspath(__file__)) 

test_css  = CSS(string=CSS_DOC, font_config=font_config, base_url=base_url)
test_html = HTML(string=HTML_DOC)

test_html.write_pdf('test-2.pdf',
                    stylesheets=[test_css],
                    font_config=font_config
)

Tontyna on Feb 2, 2020

@trthatcher @aleho I think that this issue is fixed in master. Feedback welcome!

liZe on Jun 8, 2022

Wow! You rock!

Seems fine here, all the weights rendering as expected.

aleho on Jun 8, 2022

Yep, I am blind… not sure how I missed the base_url param. Thanks @Tontyna - that solved the issue.

trthatcher on Feb 2, 2020