Edit online

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. There is no need to define a @font-face structure in the CSS.

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. In this case, 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.

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;
}

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