Forum Bugs

@font-face definitions: Text is rendered strangely if the font-weight differs from the font file

lukasbestle
Hi,

I'm using an @font-face declaration like this:

@font-face {
  font-family: FiraSans;
  src: url('firasans-medium.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}


As you can see, I'm importing a font file with a Medium weight and using it as the Bold font. That's intended – there is some markup in my document that I don't have control over and that markup uses font-weight: bold. But since the Fira Sans Bold font is very bold, I'd like Prince to use the Medium weight there. So what I'm saying is basically "use this Medium font file whenever the CSS says that it wants a bold font".

That works perfectly fine in browsers, but unfortunately not in Prince (12.3 on macOS 10.11).
It makes the text render twice with a slight overlap for some reason.

If I import and use the font with font-weight: 500, it works perfectly, even though it's the same font file and otherwise the same CSS.

I have attached the two test cases and the font file to make it easier for you to reproduce the issue.
If a fix is not possible in the near-term (the document needs to be done mid-January), it would help me a lot to have a workaround for this. Is there maybe another way to tell Prince to use a custom weight for "bold"?

Thanks,
Lukas
  1. Test.zip428.4 kB
    Test cases
mikeday
Prince is attempting to artificially embolden the font, you can disable this by passing --no-artificial-fonts on the command-line.
lukasbestle
Thank you for your fast reply!

I was suspecting something like this was happening, but I didn't find it in the docs. Maybe you should add a note about it to the "Fonts" section in the User Guide.

Passing that flag has indeed fixed it, so it's a good workaround.
Anyway, I still think this is a bug. The behavior in browsers is that the font is used as is, so I think Prince should behave the same – after all, the user explicitly declares that this font file should be used and doesn't expect a faux bold to be generated (otherwise it would have been possible to load the @font-face as font-weight: 500 and then use it as bold, which would trigger the artificial font generation in a way that is expected).

It's different outside of @font-face rules of course, but @font-face is already so specific that any "smart" behavior is not expected.