Customizing typography with Restyle

Restyle can utilize user-supplied typography stored in the Restyle Configuration Store.

Restyle typography

Restyle typography is a JSON-formatted configuration document containing typography definitions used by themes. Typography definitions are named JSON elements that consist of a typeface name, font size and style array.
Note: Typography customization requires the use of a user-supplied theme. See Customizing themes with Restyle.

Prerequisites

  1. HCL Domino Designer installed on your machine.
  2. Understand the JSON (JavaScript Object Notation) format at a basic level.
  3. A JSON-compatible editor.
  4. A local replica of restyle.nsf. See Restyle Configuration Store.

Exporting typography configuration from Restyle.nsf

The best way to create a custom typography file is to start with the default typography file and modify it as needed. Export the default typography file and the typography schema from restyle.nsf by following these steps:

  1. Create a directory to use as a destination for the typography and schema files.
  2. Launch Domino Designer.
  3. Open the local replica of restyle.nsf.
  4. Navigate to Resources/Files and double-click the Files entry.
  5. Select reserved/schema/typography-<version>.json and click Export. This is the "typography schema".
  6. Select the directory created in step 1 and click Save to save the schema file.
  7. Select reserved/typography/default-typography.json to use as a starting theme and click Export.
Note: The file names contain the sequence 2f instead of the '/'. Since you aren't importing these files after changing, you can rename to remove the 2f if desired.

Creating a custom typography

  1. With your JSON-capable editor, open the exported typography file and save as a new typography file, for example: my_custom_typography.json.
  2. For best results, configure your editor to associate the typography schema with your new typography. This provides auto-complete functionality and validates the document before Restyle uses it.
  3. Modify the typography document as needed.
  4. Import the new typography document into restyle.nsf:
    1. Launch Domino Designer.
    2. Open the local replica of restyle.nsf.
    3. Navigate to Resources/Files and double-click the Files entry.
    4. At the top of the "Files" collection, click New File Resource.
    5. Enter typography/my_custom-typography.json (or whatever you named your typography file) as the name.
      Note: The "typography/" prefix is required to allow the Restyle feature to find the custom theme.
    6. Enter a user-friendly display name as the alias value.
    7. Comment is not currently used but may be useful for documentation purposes.
    8. In your JSON editor, select the entire document and copy to the clipboard.
    9. Paste the contents of the clipboard into the newly created file resource in Domino Designer.
  5. Update your custom themes to use the new typography configuration:
    1. Open a custom theme.
    2. At the top of the theme, add a property named "typographyOverride" with the value of your new typography configuration. For example:
      {
"version" : "1.0.0",
"typographyOverride" : "my_custom_typography",
.
.
.
    3. Save the theme.

Using the customized typography

Whenever a user applies a theme that references the custom typography file, the new typography settings will override the default settings in the theme.
Note: It is necessary to define all of the typography definitions referenced by the theme.