Oxygen XML Forum

Posted: **Tue Jul 26, 2022 6:48 pm**

Hello, this is a followup to my earlier queries. I have watched the videos and read the Help, but not sure if the guidance is applicable since I used the Styles Basket. I dragged/dropped my fonts into the styles basket UI, and the styles.css has this:

Code: Select all

@font-face {
  font-family: 'BrandingFont';
  src: url(resources/primaryBrandingFonts.ttf) format('truetype');
}
@font-face {
  font-family: 'SecondaryBrandingFont';
  src: url(resources/secondaryBrandingFonts.ttf) format('truetype');
}
@media print {
  @page front-page {
    background-image: url("resources/cover.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
  }
}
/* Bold selection in Publication TOC. WebHelp only. */
@media screen {
  .wh_publication_toc .active > .topicref a {
    font-weight: bold;
  }
}

In the browser, elements in DITA that were wrapped in <b> are bold:

image.png

But in the PDF, the are not:

image.png

Also, TOC entries that seem to be automatically formatted as bold in the broswer:

image.png

are not bold in the PDF:

Do you have any suggestions on how to adjust the css so the PDF matches the browser output formatting?

Thank you!
Pat

Posted: **Tue Jul 26, 2022 11:03 pm**

Pat - the PDF should match the rendering of the merged HTML generated by the PDF-CSS-HTML5 transformation, as long as the browser's media emulation is set. To confirm, do you have the media type set to "print" in the browser inspector?

image.png

In your inspector screen capture, I see "font-weight" has a strikethrough style, indicating that something is overriding the browser default ("user agent"). If you click the "Computed" button, what do you see as the final font-weight, and if you expand the font-weight expand/collapse icon, where does the winning setting come from?

image.png

You can also click this button to show the computed styles in a separate pane for reference (useful if you have a large or widescreen display):

image.png

Posted: **Wed Jul 27, 2022 12:36 am**

Hello, thanks for your reply. I selected Emulate Print both in Edge and Firefox. The browser still shows bold and here is what the inspect pane shows. I had even created a class .b {font-weight: 800;} in my custom css. That didn't seem to do anything in the print version.

image.png

Posted: **Wed Jul 27, 2022 9:37 am**

Hello,

Could you indicate which fonts you uploaded into Oxygen Styles Basket?
I will try to see if I can reproduce the problem on my side.

Regards,
Julien

Posted: **Wed Jul 27, 2022 1:08 pm**

Hi Julien, First one is a company font, second one I got from Google fonts.

Pat

Posted: **Wed Jul 27, 2022 6:24 pm**

Hello Pat,

I reproduced the issue, I also added an issue on Oxygen Styles Basket to correct this behavior.
Until the release of the new version, you can already alter the styles.css file to add this:

Code: Select all

@font-face {
  font-family: 'BrandingFont';
  src: url(resources/primaryBrandingFonts.ttf) format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'BrandingFont';
  src: url(resources/primaryBrandingFonts.ttf) format('truetype');
  -oxy-simulate-style: yes;
  font-weight: 700;
}
@font-face {
  font-family: 'SecondaryBrandingFont';
  src: url(resources/secondaryBrandingFonts.ttf) format('truetype');
  font-weight: 400;
}
@font-face {
  font-family: 'SecondaryBrandingFont';
  src: url(resources/secondaryBrandingFonts.ttf) format('truetype');
  -oxy-simulate-style: yes;
  font-weight: 700;
}

The problem should disappear after that. I will notify this thread once the new version will be available.

Regards,
Julien

Posted: **Wed Jul 27, 2022 11:22 pm**

That worked, thank you Julien!!! Much appreciated!
Pat

Oxygen XML Forum

No Bold in PDF using HTML with CSS

No Bold in PDF using HTML with CSS

Re: No Bold in PDF using HTML with CSS

Re: No Bold in PDF using HTML with CSS

Re: No Bold in PDF using HTML with CSS

Re: No Bold in PDF using HTML with CSS

Re: No Bold in PDF using HTML with CSS

Re: No Bold in PDF using HTML with CSS