Fonts

In templates for personalized customer communications you can use the operating system's fonts, including imported fonts. There are two ways to incorporate remote or "web" fonts, as well; see Using remote fonts.

When you are using a font that is not installed on your machine (for example, the bold or italic variant of a regular font) Windows tries to simulate the font in the Designer. Likewise, OL Connect tries to simulate the font in the output. It is however not guaranteed that the output will be exactly as shown in the Designer.

It is strongly advised to make sure that all used fonts are available and to always test the output before running production jobs.

The safest option is to import the fonts into the template itself; see Importing a font.

If fonts used in a template are not imported into the template, they will need to be installed on both the computer where the template was designed and on the computer where the output will be created.

Note: Hosting non-standard fonts on the operating system in a server environment (as opposed to importing them into the template) is not recommended.
If output is produced on the server whilst running under a different account, that account might not have access to the font.

If you do add a font to a server, select the option "Install for all users", and do not forget to restart the machine, as otherwise the font might not be available, due to the way certain Windows versions handle fonts.

Note: Variable fonts - officially known as OpenType Font Variations - are not supported. In order to convert a variable font to a non-variable font you could try https://fontforge.org/en-US/ (but note that this doesn't work for CCF2 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:
Copy
```
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.
Note: 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.

Note: Font software may have specific restrictions for copying and redistribution. Please consult the license agreement for each font vendor before using it in a template. It is your responsibility to comply with the requirements of third-party agreements.

Note: Vertically-oriented fonts (fonts whose typeface name begin with the at (@) character) are not supported in Connect.

Using separate font files for font effects

Fonts normally come with separate files for the bold, italic and any other versions of the font.
When you style text, Connect will use the appropriate font file to display the text, if that font file is linked to the respective font effect.
Here's how to combine a font file with a font effect.

Import the files for the bold, italic and any other versions of the font into the Fonts folder.
Initially, imported fonts appear as separate entries in the Fonts drop-down on the toolbar. They are not used automatically when you style text, for example using the Bold and/or Italic toolbar button. For that, they have to be linked to a font effect.
Open the Font Manager: from the menu, select Edit > Fonts.
Combine each of the styled fonts with a font effect:
1. Select the font and click the Edit button.
2. Select the appropriate font effect (e.g. Font Weight: Bold, or Font Style: Italic).
3. Change the name of the styled font. It should have the same name as the regular font.
Close the Font Manager.

Style simulation

When it can't use a separate font file for a particular font effect, Connect will mimic the bold and italic versions of that font. This is called style simulation.
There are some major drawbacks to style simulation. Firstly, it is not reliable: it does not work for all fonts. Secondly, style simulation is costly in terms of performance (output is created slower) and results in bigger files. Finally, because of the plain machine transformation of the font, the result will probably not look as good as when using a carefully designed, properly styled, font.
It is much better, if you have separate files for the bold, italic and any other versions of a font, to use those.

Font types

The Designer currently supports 5 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:

Copy

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

Using remote fonts

Adding remote web fonts directly

The most straightforward method for using web fonts in Designer is this:

With Designer open, select the Fonts folder from the Resources tab.
Right-click to display the context menu and select Web Font.
Provide a name for the font, and enter the URL.

This adds a link to the font in the Fonts folder, and the font can be used in your templates.

Note that some email clients are not able to display web fonts used in email messages. In those scenarios the email will use the fall back font of the client (unless specified differently in a stylesheet).

When choosing fonts, we suggest adding multiple styles (regular, italic, bold weights etc). When dedicated font styles are not available, the browser has to synthesize styles such as bold and italic. You can pick multiple font families and still get one stylesheet URL. For example, fonts from Google Fonts include all the chosen fonts.

Using a style sheet to point to the font style sheet

Instead of adding web fonts directly, you can 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.

These 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.

Note: Support for remote fonts in email clients cannot be relied upon, and not all remote fonts are supported by all browsers. It is therefore recommended to add fallback fonts to the specific style rules whenever using remote fonts in a Web or Email section (see Applying a font).