Font always showing as bold-italic in Author view

[mprewittastec]

All the fonts that should be simply regular, non-italic are displaying as bold-italic in the Author view window. For example:

bi-example.png (14.88 KiB) Viewed 293 times

The font declarations appear to be correct:

Code: Select all

/*  Archivo font family */
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}

In the CSS inspector, the active font style and weight appear to be correct:

inspector.png (15.04 KiB) Viewed 293 times

If I remove the CSS font face entries for bold and italics, then the normal weight appears correctly. But obviously in that case I can't use bold or italics. Cannot determine what I'm doing wrong. Any help would be appreciated!

[Radu]

Hi,

Oxygen's CSS based Author visual editor is limited in functionality as opposed to a full web browser.
The dynamic loaded font family alias "Archivo" instead of being assigned in this case to a set of three different fonts, each usable when certain font styles are defined, is assigned to a single to only one loaded font, so the last selector in the CSS:

Code: Select all

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}

is the one which "wins" and later on wherever you use "Archivo", it will use the "Archivo-BoldItalic.ttf" glyphs.
We have an internal issue to improve on this behavior, if at some point in the future we manage to implement it we will let you know.
In the meantime you would probably need to define separate aliases like:

Code: Select all

/*  Archivo font family */
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Archivo-I";
  src: url("fonts/Archivo-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Archivo-B";
  src: url("fonts/Archivo-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Archivo-BI";
  src: url("fonts/Archivo-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}

and then use these explicitly in the CSS, on elements which are italic for example use the font-family "Archivo-I".

Regards,
Radu

[mprewittastec]

I understand. Thanks for the reply. Does this apply to output as well, or only the Author view? It was my hope that the Author view would mirror the output, more or less. I hope that in the future this can be improved!

[Radu]

Hi,
What do you mean by output? PDF, HTML? For PDF are you using the CSS-based processor bundled with Oxygen?
Regards,
Radu

[mprewittastec]

I'm referring to PDF output primarily.

[julien_lacour]

Hi,

If you are using the DITA Map PDF - based on HTML5 & CSS scenario you can define a custom CSS stylesheet and apply it to the transformation, for example these rules:

Code: Select all

/*  Archivo font family */
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Regular.ttf");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Italic.ttf");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Bold.ttf");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-BoldItalic.ttf");
  font-weight: 700;
  font-style: italic;
}

body {
  font-family: "Archivo", sans-serif;
}

*[class ~= "front-page/front-page-title"] {
    font-family: "Archivo", sans-serif;
}

Should give you an output using the correct Archivo font, using italic only where it is declared.
I've tested this stylesheet in <oXygen/> XML Editor 27.0, build 2024121306 with a correct output.

For more information about customizing PDF outputs using CSS you can check this topic from our user guide.

Regards,
Julien