Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Failed rendering of "Inconsolata" font #2266

Closed
ondras opened this issue Oct 3, 2024 · 3 comments
Closed

Failed rendering of "Inconsolata" font #2266

ondras opened this issue Oct 3, 2024 · 3 comments

Comments

@ondras
Copy link

ondras commented Oct 3, 2024

The Inconsolata font is a nice Google-hosted monospaced typeface that works fine in web browsers. Rendering Inconsolata text with WeasyPrint fails in a funny way.

Source:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wdth,[email protected],200..900&display=swap');
    body { font-family: Inconsolata; }
  </style>

  <p>This is a test.</p>

</body>
</html>

Command line:

$ weasyprint -d test.html test.pdf
INFO: Step 1 - Fetching and parsing HTML - test.html
INFO: Step 2 - Fetching and parsing CSS - CSS string
INFO: Step 2 - Fetching and parsing CSS - https://fonts.googleapis.com/css2?family=Inconsolata:wdth,[email protected],200..900&display=swap
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

Result:
obrazek

In-browser HTML rendering:
obrazek

Comparison with the default "monospace":
obrazek

Versions:

weasyprint             62.3
libpango-1.0-0:amd64              1.50.12+ds-1 
libpangocairo-1.0-0:amd64         1.50.12+ds-1
libpangoft2-1.0-0:amd64           1.50.12+ds-1
@liZe
Copy link
Member

liZe commented Oct 3, 2024

Hi!

Thanks for this report.

I get the correct rendering on my computer. Here’s what I’ve tried:

  <p>This is a test.</p>
  <p style="font-stretch: ultra-condensed">This is a test (narrow).</p>
  <p style="font-stretch: ultra-expanded">This is a test (wide).</p>

Capture d’écran du 2024-10-03 23-13-17

I suspect that for some reason the default font stretch is a really narrow one for you. If you don’t want condensed variants, you can try this URL as a workaround:

https://fonts.googleapis.com/css2?family=Inconsolata:[email protected]&display=swap

Could you please try my HTML with the original URL, and your HTML sample with this URL?

Do you have Insconsolata installed on your computer?

@ondras
Copy link
Author

ondras commented Oct 4, 2024

My rendering of your HTML:
obrazek

My rendering with your font URL:
obrazek

So apparently the wdth axis is causing the issue. Thanks for the workaround -- I do not need the condensed variant, so I am switching to your font URL. If this behavior is out of WeasyPrint's reach, feel free to close the issue. Thanks a lot!

@liZe
Copy link
Member

liZe commented Oct 5, 2024

I was afraid that it was a problem caused by #1073 with a variable font installed, but if it works with the simpler URL, it’s unrelated.

I suspect that there’s something wrong in the way fontconfig selects the correct font on your computer. Maybe a bug that’s been fixed in my version. Let’s close the issue for now, as the workaround is easy for you and the bug is probably not in WeasyPrint.

If anyone gets this problem again, feel free to add a comment.

@liZe liZe closed this as not planned Won't fix, can't repro, duplicate, stale Oct 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ondras @liZe