Fonts

Non-technical summary

To change the font in your template you need two parts. The font location (Google Font, a path in your installation) and the correct setup for the font family for your PDF, HTML, or EPUB exports. This page contains the technical information, and concepts to do so. Before you start, please make sure you are using open source fonts or have the licenses for the publication type you would like to use (e.g. webuse).

Fonts are an important part of a publication's design and identity. They influence not only the visual impression but also readability and professionalism. To give you full control, we support both hosted font files (installed in your hosted instsance) and Open Source fonts. For convenience, Open Source fonts can be included via the Google Fonts API.

GDPR and similar privacy frameworks

To comply with GDPR, all fonts from Google Fonts are downloaded first and then hosted locally alongside your manuscripts. No external requests are made when rendering the document or hosting it on your website.

Using Open Source Fonts

You can include any Open Source font available from Google Fonts. To do so, find the fonts you'd like to add (and all variants that you need) and copy the link provided on the Google Fonts website into your template configuration. It should look like this (but your URL might be longer):

# Google Font inclusion
kind: GoogleFont
spec:
  api:
    url: https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans+Math&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap

Embed code page for Google Fonts — **Google Fonts Embed Page**
Choose your fonts and then click the checkout symbol, choose embed, and copy the full URL as shown in the image

Using Noto - A typeface for the world - to get started

If you do not have a preference for a font, we recommend starting with the Noto font family since it's goal is to support all scripts and languages. You can choose between a sans and a sans-serif versions as well as many different variants from Japanese, Arabic, Korean, Greek, Math, etc. This is your best chance at having a font family that does it all.

During processing, we automatically download and bundle the font files so that they are embedded in the final output—both HTML and PDF. These fonts are configured in two parts in the template setup:

The kind: GoogleFont block must include the exact url from Google Fonts.
The font family must be referenced in both kind: Page and kind: HtmlPage blocks under font.family.

Example:

# Font usage in PDF
kind: Page
spec:
  page:
    font:
      family: Noto Sans, Noto Sans Math, Noto Sans Arabic, sans-serif
      size: 12pt

# Font usage in HTML
kind: HtmlPage
spec:
  page:
    font:
      family: Noto Sans, Noto Sans Math, Noto Sans Arabic, sans-serif
      size: 10pt

For PDF rendering, we automatically use .ttf files (TrueType format), while for HTML output, .woff2 files are used to optimize web delivery.

Supported formats: - .woff2 for web (HTML) - .ttf or .otf for PDF rendering

Using Your Own Fonts

Font Licensing

When using your own or commercial fonts, make sure to check their licensing terms. Some fonts may not allow redistribution, embedding in documents, or use beyond specific platforms (e.g. on your website). This does not apply to fonts from Google Fonts, which are all open-source and can be safely reused.

Our Docker images come with Microsoft Core Fonts pre-installed by default. These include widely used fonts such as Times New Roman, Arial, Georgia, Verdana, and Courier New. This means you can use these fonts directly in your template without bundling them yourself.

If your publication uses a proprietary or branded font, you can bundle the font files directly with your template. Place them in a fonts directory and reference them in the template stylesheet.

You can also configure your template to reference a local font directory using a kind: Font block. This tells the system to load fonts from a specified subfolder of the mounted fonts/ directory. For example, if you have a font family called "Constantia" stored in fonts/constantia/, and that folder includes .ttf files like constantia-regular.ttf and constantia-bold.ttf, you can register the font in your configuration like this:

kind: Font
spec:
  path: constantia
# Font usage in PDF
kind: Page
spec:
  page:
    font:
      family: Constantia, serif
      size: 11pt

# Font usage in HTML
kind: HtmlPage
spec:
  page:
    font:
      family: Constantia, serif
      size: 12pt

fonts.scss

@font-face {
    font-family: "Constantia";
    font-weight: normal;
    font-style: normal;
    src: url("fonts/constantia/constantia-regular.ttf") format("truetype");
}

@font-face {
    font-family: "Constantia";
    font-weight: normal;
    font-style: italic;
    src: url("fonts/constantia/constantia-italic.ttf") format("truetype");
}

@font-face {
    font-family: "Constantia";
    font-weight: bold;
    font-style: normal;
    src: url("fonts/constantia/constantia-bold.ttf") format("truetype");
}

@font-face {
    font-family: "Constantia";
    font-weight: bold;
    font-style: italic;
    src: url("fonts/constantia/constantia-bold-italic.ttf") format("truetype");
}

Internally, this will reference fonts/constantia/fonts.scss and include the necessary styles for both HTML and PDF rendering, assuming the font files and the fonts.scss file are properly defined. You will need to include woff2 references as well if you want to support web rendering.

Note

To use this feature, your instance must have a fonts/ directory mounted into the Docker container that processes templates. This setup is typically done during deployment. For more information on how to set up the fonts directory for your instance, see self hosting on --env FONT_PATH=/data/fonts/.

This ensures consistency across all output formats without relying on external resources.

Advanced Typography (Kerning, Variants, and More)

Modern CSS lets you fine-tune typographic behavior—essential for high-quality academic and professional publishing. These include control over kerning, numeric variants, ligatures, and OpenType features. A detailed summary of all settings for PDF can also be found in the PrinceXML Documentation.

Where to Set This Up

These settings need to be defined in your template’s custom CSS field within the configuration. They are not part of the default configuration fields and are considered advanced use. You’ll need to write and understand CSS to apply them correctly.

kind: Page (or HTMLPage)
  customStyles:
    - css: |
        /* Your advanced font settings go here */

Advanced Use

The css.custom field is a free-form area for experienced users. You don’t need to fill it out unless you want to customize typography beyond default font selection. These changes require knowledge of CSS and browser/PDF engine behavior.

Example: Oldstyle Numerals and Kerning in Front Matter

.front {
  font-family: "Literata", serif;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-kerning: normal;
  font-feature-settings: "liga" 1, "onum" 1;
}

Supported Features

font-variant-numeric: Choose between oldstyle, lining, proportional, or tabular digits
font-kerning: Enable or disable automatic glyph spacing
font-variant-ligatures: Common or discretionary ligatures
font-feature-settings: Fine-grained control for OpenType features

Good Use Cases

Aligning number styles with journal branding (e.g., oldstyle for humanistic designs)
Enabling kerning and ligatures in front matter titles and headings
Advanced adjustments for PDF rendering engines like PrinceXML

These fine-grained settings give you maximum typographic control across both HTML and PDF output. But they also come with responsibility—you should test the results thoroughly and ensure font files support the features you're targeting.