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.

Notes:

Before using a font, make sure you have the permissions to use it and make sure you comply with all the license terms.
When installing a font on Windows, make sure you select the Install for all users option.

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 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:

https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap

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", sans-serif !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, if you want to use another font for the document headings, your customization CSS should contain the following rule:

*[class ~= "front-page/front-page-title"],
*[class ~= "topic/title"] {
  font-family: "Roboto", sans-serif !important;
  font-weight: bold;
}

Then, 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~="pr-d/codeph"],
*[class~="topic/pre"] {
  font-family: monospace !important;
}

Important:

These settings do not apply to page margin boxes, only to the text inside the page. If you also want to change the font used in headers and footers, see: How to Change the Font of the Headers and Footers.

Edit online

How to Use Fonts for Symbols

For some specific symbols (e.g. arrows), you must use a font or a sequence of fonts that cover the needed character ranges. 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 you are using the Roboto font, the character is not found, the # symbol is used, and a warning is thrown (see also Glyph Not Available in Font):

[CH] Glyph "?" (0x2192, arrowright) not available in font "Roboto-Bold".

The PDF output will then look like this:

  #
    This is the right arrow.

To solve this issue, you can use Symbol as a fallback font. In your customization CSS, add:

*[class ~= "topic/dlentry"] {
  font-family: "Roboto", Symbol;
}

To change the font for the entire publication, not just an element, you can use:

:root {font-family:  "Roboto", Symbol !important; }

@page {
    @top-left {font-family:  "Roboto", Symbol !important; }
    @top-right {font-family:  "Roboto", Symbol !important; }
    @top-center {font-family:  "Roboto", Symbol !important; }
    @top-left-corner {font-family:  "Roboto", Symbol !important; }
    @top-right-corner {font-family:  "Roboto", Symbol !important; }
    
    @bottom-left {font-family:  "Roboto", Symbol !important; }
    @bottom-right {font-family:  "Roboto", Symbol !important; }
    @bottom-center {font-family:  "Roboto", Symbol !important; }
    @bottom-left-corner {font-family:  "Roboto", Symbol !important; }
    @bottom-right-corner {font-family:  "Roboto", Symbol !important; }
}

Tip:

It is possible to use a generic family name as fallback (like serif, sans-serif or monospace) to call upon the processor's default fallback fonts system.

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, Oxygen 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";
}

Edit online

How to Set Fonts for Displaying Music

Music is rendered as normal text in most fonts, but some of them will render them as musical glyphs. For example, the MusGlyphs font converts the text to music and adjusts it to the surrounding text.

This font is divided in two sub-fonts that act for each of the following categories:

MusGlyphs - Converts all characters that match a musical pattern into music glyphs. It should be used inside the elements that contain only music.
MusGlyphs-Text - Converts only the text prefixed with the @ symbol into music glyphs. The remaining text is displayed normally.

To use this font, you simply need to declare each sub-font then use them in appropriate elements:

@font-face {
  font-family: MusGlyphs;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/otf/musglyphs/MusGlyphs.otf);
}
@font-face {
  font-family: MusGlyphs-Text;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/otf/musglyphs/MusGlyphs-Text.otf);
}
@font-face {
  font-family: MusGlyphs-Text;
  font-style: normal;
  font-weight: bold;
  src: url(../fonts/otf/musglyphs/MusGlyphs-TextBold.otf);
}

/* 
 * All the elements are displayed with the MusGlyphs-Text.
 * If a text is prefixed with @, music will be displayed. 
 */
body {
  font-family: MusGlyphs-Text, serif;
}

/* Elements with @outputclass="music" contain only music. */
*[outputclass ~= "music"] {
  font-family: MusGlyphs, serif;
}