Font list

• Last updated on September 30, 2025
• •
• 5 minutes to read

For most print products, providing the user with a decent choice of fonts is key. It is difficult for the user to feel creative (and be inspired enough to complete an order) if all you have is a list of standard fonts like Arial, Times New Roman, and Verdana. To enhance the user experience, you can configure the font picker in Customer's Canvas by adding custom and commercial fonts.

Adding Fonts to the Editor

1. Copying Font Files

Copy your font files to the ..\assets\fonts\ folder of your Design Editor instance. Customer's Canvas supports the .ttf, .otf, and .woff font formats.

Note

• You don't need to register fonts in the system - you only need to put them in the asset folder.
• The Design Editor does not use system fonts. If you still want to make them available in your editor, you must copy those fonts to the ..\assets\fonts\ folder, even if they are installed on the server.

2. Defining the Font List

The font list is configured in the ~/Configuration/clientConfig.json file, at the root level of the configuration object, in the fontList array.

{
  "fontList": {
    "appFonts": [
      "Arial",
      "Georgia"
    ]
  }
}

To add all fonts from the ..\assets\fonts\ folder, define the font list as follows:

{
  "fontList": {
    "appFonts": ["*"]
  }
}

Using Font Family Names and PostScript Names

Font Family Names

If you specify a font family name (e.g., Arial), all its styles will be available in the editor. For example, specifying Arial, you allow your users to select Arial Regular, Arial Bold, Arial Italic, Arial Narrow, and so on.

To add the font family names to this list, you can open fonts by using the Windows Font Viewer and find the Font name:

Here is an example of the font list:

{
  "fontList": { 
    "appFonts": [
      "Arial",
      "Georgia",
      "Tahoma",
      "Times New Roman"
    ]
  }
}

This font list corresponds to the following font picker:

PostScript Names

If you specify a PostScript name, only that specific font style will be available. For example, your users will only be allowed for selecting theArial Regular font if you only add the ArialMT PostScript name.

To get PostScript names, you can open your fonts with a font editor. For example, in FontForge), click Element > Font info on the main menu.

To use PostScript names, set the LoadFontListAsPostScriptNames parameter to true in AppSettings.config. After that, you can define fonts as follows:

{
  "fontList": {
    "appFonts": [
      "ArialMT",
      "Georgia",
      "Tahoma",
      "TimesNewRomanPSMT"
    ]
  }
}

Important

A valid PostScript name must be shorter than 63 printable ASCII characters and must not contain (){}[]<>%/ or spaces. Invalid names will trigger font substitution.

Using Subfolders for Font Organization

You can organize fonts into subfolders within ..\assets\fonts\ and reference them in the fontList array.

Basic Syntax

Use * to include all fonts from a subfolder.

{
  "fontList": {
    "appFonts": ["minuteman/*", "foiled/*", "ArialMT"]
  }
}

This configuration loads all fonts from the minuteman and foiled subfolders, plus the specific ArialMT font.

Client-Specific Font Libraries

Subfolders allow you to manage fonts for different clients or product types. Suppose you have two clients, BrandA and BrandB, each requiring a unique set of fonts, with some fonts shared between them.

Folder Structure:

/assets/fonts/
   ├── brandA/          # Fonts for BrandA only
   ├── brandB/          # Fonts for BrandB only
   └── shared/          # Common fonts

Configuration for BrandA:

{
  "fontList": {
    "appFonts": ["brandA/*", "shared/*"]
  }
}

Configuration for BrandB:

{
  "fontList": {
    "appFonts": ["brandB/*", "shared/*", "HelveticaNeueLTPro-Roman"]
  }
}

Warning

Avoid placing the same font in multiple subfolders, especially if they are different versions. Customer's Canvas will handle duplicates by PostScriptName, but version conflicts can cause unpredictable behavior.

Automatic Font Handling

If the font list does not contain a font used in a product template, then the Design Editor looks for the font in the ..\assets\fonts\ folder. If the font is found, it is added to the font picker automatically. If the required font is not found, then a font substitution is applied to draw the text.

For example, if a template uses the Baskerville font, but it is not listed in fontList, ensure it is available in ..\assets\fonts\` to prevent substitution.

Support for Commercial Fonts

Free vs. Commercial Fonts

Free fonts usually have no usage restrictions, while commercial fonts may require a web-compatible version (e.g., WOFF format or installable embedding flag).

Using the commercial fonts in web applications can be prohibited by an End-user license agreement (EULA). Technically, TrueType/OpenType fonts include the embedding flag, and such fonts cannot be deployed to a web server if the flag has a value different from installable. Browsers check the flag before loading a font, and if it finds that the font is disallowed from using in web applications, the browser will not load it.

Checking Font Compatibility

1. Open Control Panel > Appearance and Personalization > Fonts.
2. Switch to Details view and check the Font embeddability column.
3. If the value is "Installable", the font can be used.
4. If the value is "Restricted" or "Preview & Print", find a WOFF version (font embedded into a web font container) or a version with the installable flag.

Summary Table: Font Configuration Options

Option	Description	Example
Font Family Name	Includes all styles of the font family.	"Arial"
PostScript Name	Includes only the specified font style.	"ArialMT"
Subfolder Reference	Includes all fonts from a subfolder.	"client1/*"
Mixed Configuration	Combines subfolders and specific fonts.	["client1/*", "ArialMT"]

Conclusion

By organizing fonts into subfolders and referencing them in the fontList array, you can manage font libraries for different clients or projects. Always ensure font compatibility and avoid version conflicts to maintain a stable editor environment.