Edit online

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

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:

  <dd><ph>This is the right arrow.</ph></dd>

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

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~="topic/title"] {
  font-family: Arial !important;

*[class~="topic/pre"] {
  font-family: monospace !important;

Edit online

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 until one that includes all the glyphs is found. 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