Log in / Register

Forum › How do I...?

Preventing sythetic styles to embedded fonts

Jellby
When including a font in a document via @font-face rules, it is possible to specify which attributes a given font is supposed to have. For instance, I can define a decorative font and say it is already supposed to be bold, so Prince or other browsers should not try to embolden it again. This is apparently not honoured by Prince:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ops="http://www.idpf.org/2007/ops">
<head>
  <title>Test</title>
  <style>
h2 { margin: 1em 0 0 0; }
span { font-size: 50px; }
p { margin: 0; }
@font-face {
  font-family: "Crom 1";
  src: url("Crom_v1.ttf") format("truetype");
}
@font-face {
  font-family: "Crom 2";
  font-weight: bold;
  src: url("Crom_v1.ttf") format("truetype");
}
@font-face {
  font-family: "Crom 3";
  font-style: italic;
  src: url("Crom_v1.ttf") format("truetype");
}
  </style>
</head>
<body>

<h2>Normal font</h2>
<p>normal <span style="font-weight: normal">ABC</span></p>
<p>bold <span style="font-weight: bold">ABC</span></p>
<p>italic <span style="font-style: italic">ABC</span></p>
<p>bold italic <span style="font-weight: bold; font-style: italic">ABC</span></p>

<h2>Crom (default definition)</h2>
<p>normal <span style="font-family: 'Crom 1'; font-weight: normal">ABC</span></p>
<p>bold <span style="font-family: 'Crom 1'; font-weight: bold">ABC</span></p>
<p>italic <span style="font-family: 'Crom 1'; font-style: italic">ABC</span></p>
<p>bold italic <span style="font-family: 'Crom 1'; font-weight: bold; font-style: italic">ABC</span></p>

<h2>Crom (defined as bold)</h2>
<p>normal <span style="font-family: 'Crom 2'; font-weight: normal">ABC</span></p>
<p>bold <span style="font-family: 'Crom 2'; font-weight: bold">ABC</span> (expected <span style="font-family: 'Crom 2'; font-weight: normal">ABC</span>)</p>
<p>italic <span style="font-family: 'Crom 2'; font-style: italic">ABC</span></p>
<p>bold italic <span style="font-family: 'Crom 2'; font-weight: bold; font-style: italic">ABC</span> (expected <span style="font-family: 'Crom 2'; font-style: italic">ABC</span>)</p>

<h2>Crom (defined as italic)</h2>
<p>normal <span style="font-family: 'Crom 3'; font-weight: normal">ABC</span></p>
<p>bold <span style="font-family: 'Crom 3'; font-weight: bold">ABC</span></p>
<p>italic <span style="font-family: 'Crom 3'; font-style: italic">ABC</span> (expected <span style="font-family: 'Crom 3'; font-weight: normal">ABC</span>)</p>
<p>bold italic <span style="font-family: 'Crom 3'; font-weight: bold; font-style: italic">ABC</span> (expected <span style="font-family: 'Crom 3'; font-weight: bold">ABC</span>)</p>

</body>
</html>


(the Crom font is available here)

This is maybe not the best example, but the differences between bold and normal can be seen in the character corners, and the italic slant can be appreciated as well.

Am I maybe mistaken in the way I believe it should work?
oliof
You should do

h2 {
font-weight: normal ;
}

to make sure h2 does not get bold'ed.
Jellby
Yeah, right... but that's not what I want, if the Crom font is not available, I want the titles to be bold, I just want to say that Crom is already a bold font, no need to embolden it again.
mikeday
The @font-face rule should be able to do what you want:
@font-face {
    font-family: Crom;
    font-weight: normal;
    src: url("NormalCromFont.ttf")
}

@font-face {
    font-family: Crom;
    font-weight: bold;
    src: url("BoldCromFont.ttf")
}

In what way is this failing to work?
Jellby
See the above example, I have:

@font-face { 
  font-family: "Crom 2"; 
  font-weight: bold; 
  src: url("Crom_v1.ttf") format("truetype"); 
}


But when I use:

<span style="font-family: 'Crom 2'; font-weight: bold">ABC</span>


The font in Crom_v1.ttf is artificially emboldened, even though I have defined it as bold in the @font-face. The same happens with italic.
mikeday
Sounds like a bug, we'll look into this.
mikeday
It seems that Prince respects the font-weight descriptor in the @font-face rule when matching fonts, but then later on looks at the actual font itself when deciding whether to apply artificial emboldening. Since the actual font claims not to be bold, it gets emboldened. Ideally we would preserve the information from the original @font-face rule stating that the font is in fact bold, and not embolden it further. I'll see if we can make this change for the 7.0 release.
mikeday
Unfortunately it doesn't look like we can do anything about this until after the 7.0 release. At the moment, the weight of a font comes solely from the information in the font itself, not the method used to access that font (eg. @font-face rule or system font API). Changing this will require a fairly major rewrite of the font handling in Prince, and can't be done at short notice.

The simplest workaround for this issue is to change the intrinsic weight of the Crom font. If it is actually supposed to be a bold font, changing the weight class to "bold" in the font file will allow Prince to see this and refrain from artificially emboldening it.
mikeday
It took longer than I had hoped, but the latest builds finally fix this issue and a @font-face rule with font-weight: bold will now not be artificially emboldened. Thanks for your patience! :D