Back to all How-tos

Import and use external fonts

This howto is relevant for versions 1.2 and older. Now, fonts can be added in Connect Designer by clicking on Edit > Fonts…

While there are currently no UI methods of using fonts imported into the Fonts folder in the template’s resources, they are still useable through a small bit of CSS that will “activate” those fonts for use, following which they can be called for use (again, within the CSS).

For more information on this technique, please see Using @font-face on CSS Tricks.

Step 1: Importing the fonts

To import a font into a template, simply drag the appropriate font files into the “Fonts” folder within the Resources pane. There are currently 4 font types supported in Designer: EOT, TTF, WOFF and SVG. The different formats are supported within different clients – if you’re generating a Web or Email context, it’s better to have all 4 types in order for any client to see the appropriate fonts. In the case of Print contexts, you can use only one of them and it will work fine.

Step 2: Defining the font-face in the CSS

In order to use the imported fonts, they must be described in the stylesheet using the @font-face CSS method:

@font-face {
  font-family: 'MyWebFont';
  src: url('../fonts/webfont.eot');
  src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/webfont.woff') format('woff'),
       url('../fonts/webfont.ttf')  format('truetype'),
       url('../fontswebfont.svg#svgFontName') format('svg');
}

Of course, not every font needs to be defined. For example, using only a TTF font is acceptable for Print output:

@font-face {
  font-family: 'MyTTFont';
  src: url('../fonts/webfont.ttf')  format('truetype');
}

Note the use of the ../fonts/ in the font path – this is because the stylesheet is in the css/ folder and fonts are in the fonts/ folder, so the relative path must be used.

Step 3: Using the font-face

Once the font is imported and defined, you can use it like any other font-face, even in combination. This is generally done in the stylesheet. For example, here is the font applied to the whole template:

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

Of course any element can refer to this font

#myelement {
  font-family: 'MyTTFont';
} 

And, if using scripts, the font can be added via the .css() function:

results.css('font-family', 'MyWebFont');
Tags
Designer

Leave a Reply

Your email address will not be published. Required fields are marked *