Edit online

Fonts

Fonts are an important part of the publication. Your font selection should take into consideration both design and the targeted ranges of characters.

To use them in the customization CSS:

  • You can place the font files in the same folder as your CSS and use a @font-face definition to reference them.
  • You can use web fonts (for example, Google Fonts), and import the CSS snippet into your CSS.
  • You can use system fonts.
All these techniques are explained in: Oxygen PDF Chemistry User Manual: Fonts.
Edit online

How to Avoid Characters Being Rendered as #

When the processor renders text with a font that does not include certain characters, those characters are replaced with the # symbol.

To prevent this, make sure you use the proper font.

As an example, suppose the right arrow character is used in a definition list like this:

<dlentry>
  <dt>&#8594;</dt>
  <dd><ph>This is the right arrow.</ph></dd>
</dlentry>

If the font does not include this character, the output will look something like this:

  #
    This is the right arrow.

To fix this, use a fallback font. For example, if you use Times New Roman for the entire publication, you could add Symbol as the fallback font. In your customization CSS, add:

*[class ~= "topic/dlentry"] {
  font-family: "Times New Roman", Symbol;
}
Tip: On Windows, one simple way to determine the font needed to display the text is to copy the text fragment that has rendering problems from the DITA source document and paste it into Microsoft WordPad or Word. It will automatically select a font capable of rendering the text. Simply click on the text to see the name of the font from the "Font" ribbon toolbar. Then you can use it as a fallback font in the CSS. Make sure there are no licensing restrictions on that particular font.
Edit online

How to Set Fonts in Titles and Content

Suppose that in your customization CSS, you have defined your font (for example, Roboto) using a Google web font:

@import url('https://fonts.googleapis.com/css?family=Roboto');

You can force a font on all elements, then style the ones that need to be different. The advantage of this method is that you do not need to trace all elements that have a font family defined in the built-in CSS files, you just reset them all.

In your customization CSS, add an !important rule that associates a font to all the elements from the document:

*{
  font-family:"Roboto" !important;
}
Note: If you want to use the :root selector instead of the * sector, without the !important qualifier, the elements that have a predefined font specified in the built-in CSS will keep that font. If your content uses non-Latin glyphs, it is possible that the built-in fonts do not render them.

Next, identify the selectors for the elements that need to be styled with a different font than the one associated above. For information on how to do this, see: Debugging the CSS.

For example, if you want the titles or the pre-formatted text to have a different font from the rest, matched by the above * selector, you need to use more specific CSS selectors:

*[class~="front-page/front-page-title"],
*[class~="topic/title"] {
  font-family: Arial !important;
}

*[class~="pr-d/codeph"],
*[class~="topic/pre"] {
  font-family: monospace !important;
}
Edit online

How to Use Fonts for Asian Languages

For Asian languages, you must use a font or a sequence of fonts that cover the needed character ranges. If the characters are not found, the # symbol is used.

When you specify a sequence of fonts, if the glyphs are not found in the first font, the next font is selected, and so on until one is found that includes all the glyphs. A common font sequence for Asian languages is as follows:

  font-family: Calibri, SimSun, "Malgun Gothic", "Microsoft JhengHei";

To apply this font sequence, see: How to Set Fonts in Titles and Content.

Some of the Asian fonts do not have italic, bold, or bold-italic variants. In this case, you may use the regular font file with multiple font face definitions to simulate (synthesize) the missing variants. You need to use the -oxy-simulate-style:yes CSS property in the font face definition as explained in: Using Simulated/Synthetic Styles in Oxygen Chemistry.

How to Use Asian Fonts in Linux

For Asian languages on Linux distributions, PDF Chemistry automatically uses DejaVu and Noto CJK as fallback fonts for Serif, Sans-Serif, and Monospace content.
Warning: On some distributions, the Noto CJK fonts are not available. In this case, you need to install them using the system package manager:
  • fonts-noto-cjk on Debian family distributions (e.g. Ubuntu).
  • google-noto-cjk-fonts on Red Hat family distributions (e.g. CentOS).

How to Add a New Asian Font

If you want to add a specific font for Asian languages, you need to declare it inside your customization CSS. The following example uses the Noto Sans Tamil font-family:

/* Font Declaration */
@font-face {
    font-family: "Noto Sans Tamil";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/ttf/notosanstamil/NotoSansTamil-Regular.ttf);
}

@font-face {
    font-family: "Noto Sans Tamil";
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/ttf/notosanstamil/NotoSansTamil-Bold.ttf);
}

/* Font Usage */
* {
    font-family: sans-serif, "Noto Sans Tamil";
}