- 27 Sep 2024
- 3 Minutes to read
-
Print
Customize fonts
- Updated on 27 Sep 2024
- 3 Minutes to read
-
Print
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:
Property | Description | Range | Example |
---|---|---|---|
<url> | Specify the path to the font file within the ZIP archive. | - | 'fonts/NotoSans-Regular.ttf' |
<family-name> | Specify the name of the font | - | 'Noto Sans' |
<weight> | Specify the weight of the font. | "normal", "bold", "100", "200", "300", "400", "500", "600", "700", "800", "900" | "normal" |
<style> | Specify the font style. | "normal", "italic", "oblique" | "normal" |
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:
Property | Description | Example |
---|---|---|
<display-name> | Specify the name of the font and the typeset within the IXM Platform. | 'fonts/NotoSans-Regular.ttf' |
<font-family> | Specify the name of the font and the typeset within the IXM Platform. In the IXM Platform, the font is registered via the font name. If you import fonts with the same name, the system updates the existing fonts. | 'Noto Sans' |
<character-set-name> | Specify the typeset. This is required for the classification of the standard typeset. Character sets are optional and recommended for global character support such as Chinese characters. In this case, font files can be very large in size. | 'normal' |
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:
- Navigate to the configuration files on the server at: \GVServer2\www\gv2\gf\GFWebHtmlCustomer\
- 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.
- Open the config.json file in your folder with a text editor like Notepad++.
- Go to asc > composer > defaults > fonts.
- 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.
- 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;
}