Create a custom font

This topic describes how to create a new custom font entry in the Fonts tool and configure it for use in the PDF Designer or the UI5 Theme Generator.

Prerequisites

  • The font files you want to upload are available on your local machine and are not inside a ZIP archive.

  • You know which tools (PDF Designer and/or UI5 Theme Generator) will use the font, so you can prepare the correct file formats:

    • .ttf or .otf for the PDF Designer

    • .woff2 for the UI5 Theme Generator

Procedure

Step 1: Create custom font entry

  1. Open the Fonts tool in the Cockpit.

  2. Select Create to open the new font dialog.

  3. Enter a name for the font and assign the font to a development package.

  4. On the General tab, select the checkboxes for the tools in which you want to use the font:

    • Select Use in PDF Designer to make the font available in the PDF Designer.

    • Select Use in UI5 Theme Generator to make the font available in the UI5 Theme Generator.

  5. Save the font entry.

Step 2: Upload font files

You can upload font files using the Add dialog or by dragging and dropping files in the Files tab.

Option A — Add dialog

  1. Open the font entry and in the Files tab, select Add.

  2. Select Browse and select the font file from your local machine.

  3. Select Add to upload the file.

Option B — Drag and drop

  1. Open the font entry.

  2. Drag the font file from your local file system and drop it into the upload area of the Files tab.

ZIP archives cannot be uploaded directly. Extract any compressed archives before uploading.

Step 3: Assign font styles

  1. Open the Font Styles tab.

  2. Assign the uploaded font files to the appropriate style slots for each tool selected in Step 1.

  3. For the PDF Designer, assign all four required styles:

    • Regular

    • Bold

    • Italic

    • Bold Italic

  4. For the UI5 Theme Generator, assign the styles for which you have font files:

    • Regular, Bold, SemiBold, Light, SemiBoldDuplex, Black

The PDF Designer requires all four style variants to be assigned. If any are missing, the font will not be available for selection in the PDF Designer.

Step 4: Save the font

  1. Review your configuration on both tabs.

  2. Select Save.

    Result: The font entry is saved and the font is available for use in the tools you selected.

Step 5: Deploy the font (Optional)

To make the font available in a running system:

  1. Add the font to a package.

  2. Push the package via your Git-based deployment pipeline.

Result

  • The custom font is created, configured, and ready for use.

  • If deployed, it is available in the PDF Designer and/or UI5 Theme Generator as configured.

Related Topics