Edit online

Using Simulated (Synthetic) Styles

Some fonts do not have a bold or italic variant, and Oxygen PDF Chemistry automatically falls back to the regular font. This topic demonstrates how to instruct Oxygen PDF Chemistry to synthesize font variants. Do not use this technique if you have all the font components.

Important: Before using simulated font-face variations, make sure you comply with the font licensing terms.

Using a Simulated Styles Font from a True Type File (ttf)

Suppose you plan to style the output with the fictitious Syncro-Oxygen font and you just have the Syncro-Oxygen-Regular.ttf font available. The regular font face definition will be:

@font-face {
  font-family: "Syncro-Oxygen";
  font-style: normal;
  font-weight: 400; /* normal */
  src: url("fonts/raleway/Syncro-Oxygen-Regular.ttf");
}

For the missing style combinations, this example uses the -oxy-simulate-style: yes CSS extension property.

@font-face {
  font-family: "Syncro-Oxygen";
  font-style: normal;
  font-weight: 700; /* bold */
  -oxy-simulate-style: yes;  
  src: url("fonts/raleway/Syncro-Oxygen-Regular.ttf");
}
@font-face {
  font-family: "Raleway";
  font-style: italic;
  font-weight: 400; /* normal */
  -oxy-simulate-style: yes;  
  src: url("fonts/raleway/Syncro-Oxygen-Regular.ttf");
}
@font-face {
  font-family: "Raleway";
  font-style: italic;
  font-weight: 700; /*bold*/
  -oxy-simulate-style: yes;
  src: url("fonts/raleway/Syncro-Oxygen-Regular.ttf");
}

Using a Simulated Font Style from a True Type Font Collection (ttc)

Chemistry Limitation:

The @font-face rules in your CSS work as expected when they are pointing to a .ttf file. If you intend to use a .ttc collection, the value of the font-family property should match exactly one of the font names from the collection (a collection contains multiple fonts).

The following example uses the fictitious Syncro-Fusion font (the sf.ttc file). Suppose this font provides regular, light, bold, but no italic or bold-italic variants. In this case, you may want Oxygen PDF Chemistry to generate the missing variants for you.

To use the regular variant, use a simple @font-face definition, making sure the font family is found in the collection:

@font-face {
  font-family: "Syncro-Fusion";
  font-style: normal;
  font-weight: 400;
  src: url("fonts/syncro/sf.ttc");
}

For the missing style combinations, the example uses the -oxy-simulate-style: yes CSS extension property.

@font-face {
  font-family: "Syncro-Fusion";
  font-style: normal;
  font-weight: 700;
  -oxy-simulate-style: yes;
  src: url("fonts/syncro/sf.ttc");
}
@font-face {
  font-family: "Syncro-Fusion";
  font-style: italic;
  font-weight: 400;
  -oxy-simulate-style: yes;
  src: url("fonts/syncro/sf.ttc");
}
@font-face {
  font-family: "Syncro-Fusion";
  font-style: italic;
  font-weight: 700;
  -oxy-simulate-style: yes;
  src: url("fonts/syncro/sf.ttc");
}
@font-face {
  font-family: "Syncro-Fusion";
  font-style: normal;
  font-weight: 100;
  -oxy-simulate-style: yes;
  src: url("fonts/syncro/sf.ttc");
}