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 first step 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. Find the fontList array there and add the font family names to the list. You should use the correct font family names, which you can find using the Windows Font Viewer:

Windows Font Viewer.

Here is an example of the font list:

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

The font list above corresponds to the following font picker:

The font picker.

To add all fonts from the ~\Fonts\ folder to the font list, use the following snippet:

"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 required by a product, 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.

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.

Font Embeddability.

See Also

Manual