Customize fonts

To use your own fonts in the HTML Composer and HTML Wizard, you need to import them into the IXM Platform.

Prerequisites

Ensure that you meet the following prerequisites to import fonts:

• You must be a server administrator to import fonts.
• Your fonts must be web fonts that can be displayed by the browser. 
• The fonts must be compatible with as many browsers as possible. The minimum requirement is compatibility with Chrome as well as Webkit because these browsers are used for playback on most players.
• If a font requires multiple character sets, the fonts must be split into multiple parts which means multiple font files.

Create the ZIP file

To import fonts into the IXM Platform, you must create a ZIP file that contains a style file (style.css), a font information file (fonts.json), and the corresponding font files. The ZIP archive must have the extension .font.zip.

Within the ZIP file, you can create your own file structure to save your fonts. However, ensure that the corresponding path to the fonts within the ZIP file is specified correctly in the style.css file.

Configure the style file

The style.css file is a text file that provides the browser with information about the font. Each new font requires a corresponding font entry.

@font-face {
src: <url>;
font-family: <family-name>;
font-weight: <weight>;
font-style: <style>;
}

In the file, you must specify all of the following properties:

Example: Noto Sans font

@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-Italic.ttf");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Noto Sans";
    src: url("fonts/NotoSans-BoldItalic.ttf");
    font-weight: 700;
    font-style: italic;
}

Configure the font information file

The fonts.json file provides information about the font to the IXM Platform. It must have the following structure:

{
	"DisplayName": <display-name>,
	"FontFamily": <font-family>,
	"CharacterSets":
	{
		<character-set-name>:
		{
			"DisplayName": <display-name>,
			"FontFamily": <font-family>
		},
		<character-set-name>:
		{
			"DisplayName": <display-name>,
			"FontFamily": <font-family>
}

In the file, you must specify all of the following properties:

Additional fonts for unavailable characters

If an integrated font doesn't contain all required characters such as Chinese characters, you can integrate a second font that provides the missing characters. Both fonts must be available in the font folder of the system.

To specify which characters should be used, use the unicode-range in the style.css file.

Example: Combi Font

In this example, the first characters (numbers and punctuation) come from the font Roboto Mono and all others from Noto Serif.

Entries in the style.css file:

Entries in the fonts.json file:

Import the fonts

To import fonts into the IXM Platform, copy the ZIP file into the uploadFonts folder of the customer on the server.

• When you add a font for the first time, we recommend to test it in the HTML Wizard and HTML Composer.
• We recommend to not remove previously imported fonts from the system.

Specify default values

You can specify standard values for character spacing and font size for each font.

To do so, perform the following steps:

1. Navigate to the configuration files on the server at: \GVServer2\www\gv2\gf\GFWebHtmlCustomer\
2. Open one of the following the folders:
   • 00000: edit configurations for the entire server, which means for all customers.
   • 000xxx: edit customer-specific settings. xxx is the customer ID.
3. Open the config.json file in your folder with a text editor like Notepad++.
4. Go to asc > composer > defaults > fonts.
5. Change the following values:
   • fontFamily: use the same as in the font.json file in the respective .font.zip file.
   • letterSpacing: specify the character spacing in pixel.
   • fontSize: specify the font size in pixel.
6. Save your changes and close the file.

"font":{
          "Lobster GF":{
            "letterSpacing": 0px,
            "fontSize": 22px,
            "paddingTopPercent ": 20

          },
          "Roboto GF":{
            "letterSpacing": 50px,
            "fontSize": 12px,
            "paddingTopPercent ": 50

          }
        }

Example: Cormorant Garamond_serif_OFL

fonts.json:

{
	"DisplayName": "Cormorant Garamond",
	"FontFamily": "Cormorant Garamond",
	"CharacterSets":
	{
	}
}

style.css:

@font-face {
    font-family: "Cormorant Garamond";
    src: url("fonts/CormorantGaramond-Regular.ttf");
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("fonts/CormorantGaramond-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("fonts/CormorantGaramond-Italic.ttf");
    font-style: italic;
}
@font-face {
    font-family: "Cormorant Garamond";
    src: url("fonts/CormorantGaramond-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic;
}