Fonts

Inkcite makes it easy to manage the fonts and styles you use throughout your email. All container elements ({td}, {div} and {span}) plus {img} and {a} support the font attributes.

{div font-size=25 font-weight=bold}
   This text will display bolded, 25px in the default font family.
{/div}

Container elements support the following font-related attributes: color, font-family, font-size, font-weight, line-height, letter-spacing.

Named Font Styles

You’re likely going to use the same size, line height, weight and font family repeatedly in your email. Keeping your code DRY is important, so Inkcite makes it easy to define a set of font attributes as a named style.

// Define the default font used throughout your email
default-color   {#text}
default-font-size   12
default-line-height 18",

Now, in your source.html file, you can quickly and easily apply this style to any container element:

{div font=default}
   This text will have all of the font settings (color, size and
   line-height) specified in helpers.tsv.
{/div}

You can mix-and-match font attributes for maximum flexibility. You can override any attribute specified in a named style inside of the container. For example:

{div font=default color=#f00}
   This text will have all of the default font attributes (size,
   line-height and responsiveness) but the color has been changed
   from {#text} to red.
{/div}

Web Fonts

Inkcite makes it easy to use Google Fonts and Hoefler&Co Fonts in your email. Several email clients, particularly mobile ones, support custom fonts specified via CSS.

After you have selected one or more fonts for your project, the font host should provide you with a URL (or CSS Key as H&Co refers to it) to a stylesheet. For example, by selecting the 100- and 700-weights of Roboto, Google gives you this <link> tag:

<link href='https://fonts.googleapis.com/css?family=Roboto:100,700'\n   rel='stylesheet' type='text/css'>

Copy just the the URL and include it inside of your project’s config.yml file in a new fonts: section. You can include as many font URLs as your email design requires.

fonts:
 - https://fonts.googleapis.com/css?family=Roboto:100,700
 - https://cloud.typography.com/1234/5678/css/fonts.css

Once the font is declared inside of config.yml you are now free to use the font-family and font-weight attributes just like you would in normal CSS. For example, to use the 700-weight in a custom {h1} helper you might configure it like this:

h1   {div font-family=\"Roboto,Arial\" font-weight=700} {/div}

Alternatively, you could declare the font family in helpers.tsv as a part of a named style:

headline-font-family    Roboto,Arial
headline-font-size  25
headline-font-weight    700
headline-color  #248FB2

h1  {div font=headline} {/div}

// Slightly smaller headline that inherits the other font settings
// but overrides the font size.
h2  {div font=headline font-size=18}    {/div}

Responsive Fonts

As suggested earlier, all container elements support responsive fonts. These attributes mirror their desktop counterparts but are prefixed with mobile- such as mobile-font-size or mobile-line-height.

{div font-size=18 mobile-font-size=25}
  On desktop, this text will be 18px but on mobile devices it will
  display in 25px size.
{/div}

When present, Inkcite applies the correct CSS and media queries to the element so that on smaller mobile devices (e.g. phones), the text within can have adjusted visual appearance.

To keep your code DRY, responsive fonts are fully supported in helpers.tsv:

// Defines default desktop and mobile fonts for this email.
default-color   {#text}
default-font-size   12
default-line-height 18
default-mobile-font-size    16
default-mobile-line-height  22