Using Local Font Files

Font Files Next to the CSS

If the font file is not installed in the system, you can place it next to your custom CSS file. You will have to declare one or more @font-face structures, with the same font-family, but with possible different font-weight and font-style properties (as in the example below where the TitilliumWeb font is a bundle of multiple TTF files, each one for a specific font-weight and style). The TTF files were placed in a folder next to the CSS named fonts/titillium.

@font-face {
  font-family: titillium;
  font-style: normal;
  font-weight: 400;
  src: url(fonts/titillium/TitilliumWeb-Regular.ttf) ;
}
@font-face {
  font-family: titillium;
  font-style: normal;
  font-weight: 300;
  src: url(fonts/titillium/TitilliumWeb-Light.ttf) ;
}
@font-face {
  font-family: titillium;
  font-style: normal;
  font-weight: 200;
  src: url(fonts/titillium/TitilliumWeb-ExtraLight.ttf) ;
}
@font-face {
  font-family: titillium;
  font-style: normal;
  font-weight: 600;
  src: url(fonts/titillium/TitilliumWeb-SemiBold.ttf) ;
}

section h2 {
    font-family: titillium, Serif;
}

Font Files from a Directory

If you have your font files located in a particular directory, you can instruct Oxygen PDF Chemistry to load them. To do this, use the -fonts-dir command-line argument and just specify the name of the font directly in the font-family property, as you would for the built-in fonts. Using this approach there is no need to define a @font-face structure in the CSS.

Tip: Using @font-face declarations in your CSS and keeping the font files next to the CSS is the recommended way to customize your output. In this way you can create a self-contained customization, with no need to deploy fonts in other directories.

Font Files from the Oxygen PDF Chemistry Installation

Another way is to copy your font files in the following subfolder: [CHEMISTRY_INSTALL_DIR]/config/fonts. Again, there is no need to define a @font-face structure in the CSS, just specify the name of the font directly in the font-family property.

Note: When using the Oxygen Publishing Engine, the Chemistry processor is installed in the [OPE_INSTALL_DIR]/plugins/com.oxygenxml.pdf.css/lib/oxygen-pdf-chemistry folder. You will need to add the fonts in the config/fonts sub-folder. However, the best approach is to use @font-face definitions in your CSS , avoid altering the Chemistry installation.

In more simple cases, you might create a single @font-face structure.