Fonts

In templates for personalized customer communications you can use the fonts that are provided with the Designer, as well as imported fonts.

Applying a font

To apply a particular font to a piece of text, you can:

• Select some text, or an element that contains text (see: Selecting an element) and select a font from the Fonts drop-down on the toolbar.
• Use the name of the font in a CSS rule, for example:

  body {
  font-family: Verdana, Arial, sans-serif;
  }

  Instead of the body tag, any element that can have the CSS property ‘font-family’ can be used.

  Make sure that the rule is applied to the text that you wanted to apply the font to; see Step 2: apply CSS to the content.

  The reason for specifying more than one font in a style sheet for web pages and emails is that the font might not be available on the device on which they are viewed.
  Order the font names by preference. The last one should be the generic font family (either serif or sans-serif).

Importing a font

To import a font into a template:

• Drag the appropriate font files into the Fonts folder on the Resources pane.

When text is displayed in an imported font, the Designer can mimic the bold and italic versions of that font. If you have separate files for the bold, italic and possibly other versions of a font, you can make the Designer use the appropriate files to style text. To do this:

1. Import the files for the bold, italic and/other versions of the font into the Fonts folder.
2. On the Edit menu, click Fonts, to open the Font Manager.
3. Select the normal version of the imported font and duplicate it using the Duplicate button, once for each version of the font.
4. For each of the duplicates, combine a font effect with a file:
   • Click a duplicate and click the button Edit. Note: don’t change the duplicate’s name!
   • Select the appropriate font effect (font-weight and/or font-style).
   • Check the file or files the Designer should use for that effect. Per file type, one file can be checked.
5. Close the Font Manager.

The Designer currently supports 4 font types: TTF, OTF, WOFF, EOT and SVG.

When you are creating a Web template, keep in mind that the different font types are not supported by all clients; for instance, EOT and SVG are used only by Explorer and Safari, respectively.

When creating an Email template, it's better to import several types of the same font, in order for any client to see the appropriate fonts.

In the case of a Print context you do not need to provide alternative fonts, because the output is not displayed using a font from the device on which the output is read.

Applying an imported font

Once a font is imported, it is automatically added to the Fonts drop-down on the toolbar.

It can also be used in the style sheets, even in combination with other fonts, for example:

body {
font-family: 'MyWebFont', Arial, sans-serif;
}

Using remote fonts

In order to use a remote font, you have to add a remote style sheet that points to a web font style sheet, for example https://fonts.googleapis.com/css?family=Roboto+Slab. For instructions see Using a remote style sheet.

Remote fonts can be applied to content in a Master page, section, or Snippet. They may be used in a style sheet and they are automatically added to the Fonts drop-down on the toolbar. Note that the list of font names is based on the style sheets that are included in the active section (see Applying a style sheet to a section) or, when editing a Snippet, in the section that was active when the Snippet was opened.

• Last Topic Update: 27, February, 2018 08:28 AM
• Last Published: 23, May, 2019 01:55 PM