Font list

• 3-4 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. This is the time to configure the font picker and spice things up by adding some unusual and beautiful fonts.

The List of Available Fonts

The first step of configuring fonts is to copy all the font files to the ..\assets\fonts\ folder of your Design Editor instance. Customer's Canvas supports the .ttf, .otf, and .woff font files. Do not register fonts in the system - you only need to put them in this folder.

When all fonts are copied to the ..\assets\fonts\ folder, define the font list for the editor's font picker. The font list is stored in the ~/Configuration/clientConfig.json file, in the fontList array. You can use either font family names or PostScript names, depending on the LoadFontListAsPostScriptNames parameter.

When you specify a font family name in the fontList, then the whole font family appears in the editor. For example, specifying Arial, you allow your users to select Arial Regular, Arial Bold, Arial Italic, Arial Narrow, and so on. When you add a PostScript name to this list, then your users are only allowed for selecting the specified font. For example, Arial Regular appears if you add the ArialMT PostScript name.

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:

To get PostScript names, you can open your fonts with a font editor (for example, FontForge) or a Photoshop plugin (like Get Font PostScript Name). In FontForge, click Element > Font info on the main menu.

To use PostScript names in the fontList, you need to 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 is shorter than 63 printable ASCII characters and does not contain (){}[]<>%/ or space. If a font has an invalid PostScript name, then Design Editor will substitute that font.

You can add all fonts from the ..\assets\fonts\ folder to the font list as follows:

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

The Design Editor does not use system fonts. If you still want to make them available in your editor, then you must copy those fonts to the ..\assets\fonts\ folder, even if they are installed on the server.

Note

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.

Support for Commercial Fonts

All fonts are divided into two big groups: free and commercial. In most cases, authors do not impose any limitations on the use of free fonts. Whereas 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. Internet Explorer checks 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.

To use such commercial fonts in Customer's Canvas, you have to find its version for web applications: TrueType/OpenType file with the embedding flag set to installable or the font embedded into a web font container (WOFF).

You can check whether a TrueType/OpenType font is suitable for web applications by navigating to Control Panel > Appearance and Personalization > Fonts. Then switch to Details view and find the Font embeddability column in the table.