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

Created on 13 Jan 2020  ·  11Comments  ·  Source: Kozea/WeasyPrint

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!

bug
Source
picture trthatcher
👍1

Most helpful comment

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
)
picture Tontyna on 2 Feb 2020
❤3

All 11 comments

FYI, giving the medium font weight a different family name seems to be a work-around:

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

.medium {
    font-family: 'Roboto Medium';
    font-weight: 500;
}
trthatcher picture trthatcher on 13 Jan 2020

Hey!

Hello!

Awesome project here - spectacular work.

:blush:

FYI, giving the medium font weight a different family name seems to be a work-around:

I’m pretty sure that the bug is caused by this TODO. I think that WeasyPrint uses the Roboto fonts installed on your system instead of the ones given in @font-face rules.

Could you try setting a unique font-family, different from Roboto (and from any font installed on your system), for the 3 font faces? If it works, then I’ll rename this issue and you will have to use this workaround for your document until it’s fixed :wink:.

liZe picture liZe on 14 Jan 2020

Could you try setting a unique font-family, different from Roboto (and from any font installed on your system), for the 3 font faces? If it works, then I’ll rename this issue and you will have to use this workaround for your document until it’s fixed .

@trthatcher Did you find the time to try this?

liZe picture liZe on 31 Jan 2020

@trthatcher Did you find the time to try this?

By the way, we have to ignore local fonts in this case. We also have to ignore some Fontconfig rules, as described in #1048.

liZe picture liZe on 1 Feb 2020

Hey @liZe, thanks for checking in.

I'll get back to you tomorrow morning with some updates - I started testing a couple things but I unfortunately have to head out for the day. I also need to read over #1048.

Sorry for the delay on my end.

trthatcher picture trthatcher on 1 Feb 2020

Sorry for the delay on my end.

No problem :wink:.

liZe picture liZe on 2 Feb 2020

Okay, did some testing with the Tillana font for the 400, 500, 600, 700 & 800 weights which are definitely not installed on my system. Here's the directory structure:

.
├── test.html
├── test.py
├── Tillana-Bold.ttf
├── Tillana-ExtraBold.ttf
├── Tillana-Medium.ttf
├── Tillana-Regular.ttf
└── Tillana-SemiBold.ttf

The file test.html is as follows:

<!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: "Tillana";
            font-style: normal;
            font-weight: 400;
            src: url("Tillana-Regular.ttf") format("truetype");
        }

        @font-face {
            font-family: "Tillana";
            font-style: normal;
            font-weight: 500;
            src: url("Tillana-Medium.ttf") format("truetype");
        }

        @font-face {
            font-family: "Tillana";
            font-style: normal;
            font-weight: 600;
            src: url("Tillana-SemiBold.ttf") format("truetype");
        }

        @font-face {
            font-family: "Tillana";
            font-style: normal;
            font-weight: 700;
            src: url("Tillana-Bold.ttf") format("truetype");
        }

        @font-face {
            font-family: "Tillana";
            font-style: normal;
            font-weight: 800;
            src: url("Tillana-ExtraBold.ttf") format("truetype");
        }


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

        body {
            font: 16px mono;
        }

        .normal {
            font-family: "Tillana";
            font-weight: 400;
        }

        .medium {
            font-family: "Tillana";
            font-weight: 500;
        }

        .semibold {
            font-family: "Tillana";
            font-weight: 600;
        }

        .bold {
            font-family: "Tillana";
            font-weight: 700;
        }

        .extrabold {
            font-family: "Tillana";
            font-weight: 800;
        }
    </style>
</head>
<body>
<p></p>
<p class="normal"></p>
<p class="medium"></p>
<p class="semibold"></p>
<p class="bold"></p>
<p class="extrabold"></p>
</body>
</html>

I've attached the printed output for Firefox (test-1-ff.pdf), Chromium (test-1-chromium.pdf) and WeasyPrint (test-1-wp.pdf). It looks like the 500 weight is falling back to the 400.

trthatcher picture trthatcher on 2 Feb 2020

For whatever reason (ex. I could be blind and missing something obvious), when I try to replicate the above using a script, WeasyPrint doesn't seem to be finding the Tillana fonts in the same directory as the script referenced by the font-face rule. Here's my script:

# -*- coding: utf-8 -*-
from weasyprint import CSS, HTML
from weasyprint.fonts import FontConfiguration

HTML_DOC = '''
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p></p>
<p class="normal"></p>
<p class="medium"></p>
<p class="semibold"></p>
<p class="bold"></p>
<p class="extrabold"></p>
</body>
</html>
'''

CSS_DOC = '''
@font-face {
    font-family: "Tillana";
    font-style: normal;
    font-weight: 400;
    src: url("Tillana-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Tillana";
    font-style: normal;
    font-weight: 500;
    src: url("Tillana-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Tillana";
    font-style: normal;
    font-weight: 600;
    src: url("Tillana-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Tillana";
    font-style: normal;
    font-weight: 700;
    src: url("Tillana-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Tillana";
    font-style: normal;
    font-weight: 800;
    src: url("Tillana-ExtraBold.ttf") format("truetype");
}


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

body {
    font: 16px mono;
}

.normal {
    font-family: "Tillana";
    font-weight: 400;
}

.medium {
    font-family: "Tillana";
    font-weight: 500;
}

.semibold {
    font-family: "Tillana";
    font-weight: 600;
}

.bold {
    font-family: "Tillana";
    font-weight: 700;
}

.extrabold {
    font-family: "Tillana";
    font-weight: 800;
}
'''


if __name__ == '__main__':
    font_config = FontConfiguration()

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

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

Then I'm just running:

python3 test.py

Now I'm not certain what happened when I first posted the issue. I haven't updated any of the libraries, just Ubuntu:

System: Linux
Machine: x86_64
Version: #30~18.04.1-Ubuntu SMP Fri Jan 17 06:14:09 UTC 2020
Release: 5.3.0-28-generic

WeasyPrint version: 51
Python version: 3.7.4
Cairo version: 11510
Pango version: 14014
CairoSVG version: 2.4.2
trthatcher picture trthatcher on 2 Feb 2020

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 picture Tontyna on 2 Feb 2020
❤3

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

trthatcher picture trthatcher on 2 Feb 2020
👍1

So, we have a bug that’s not related to Fontconfig configurations. I’ve open a new issue (#1059) for that new problem, and changed the title of this issue to reflect the original problem.

liZe picture liZe on 11 Feb 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

whitelynx picture whitelynx  ·  5Comments
jeffgabhart picture jeffgabhart  ·  3Comments
elyak123 picture elyak123  ·  3Comments
amarnav picture amarnav  ·  5Comments
Tontyna picture Tontyna  ·  4Comments