Custom Fonts

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 ~\Fonts\ folder of your Customer's Canvas 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 ~\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.

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

Windows Font Viewer.

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:

The font picker.

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 get PostScript names, you can open your fonts in 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.

Getting PostScript names in FontForge.

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"
    ]
}

You can add all fonts from the ~\Fonts\ folder to the font list as follows:

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

Although you can use system fonts installed on the server where Customer's Canvas is deployed, we do not recommend this. It is better to copy fonts to the ~\Fonts\ folder, even if they are installed on the server. If you still want to use system fonts along with application ones, you can do this as follows:

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

If the font list does not contain a font used in a product template, then Customer's Canvas looks for the font in the ~\Fonts\ folder and among system fonts. If the font is found, it is added to the font picker automatically. If the required font is not found, then the substitute font is used to draw the text.

After you have uploaded or deleted custom fonts, you need to update local fonts' info for the host web application. There are two ways to apply the changes:

  • You can click the Reload local fonts button in the hosted version. This button is located on the Actions tab.
  • You can use Web API in both the hosted and on-premises versions. The FontPreview controller notifies the host web application about updated local fonts.

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 prior to 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.

The Font embeddability column.

See Also

Manual