Skip to main content

Hello, how can we help you today?

Or select a category below
Getting Started
Videos

How to use font stacks in Exclaimer

  1. Exclaimer Knowledge Base
  2. Signature Design
  3. Signature Design
Ari Flavell
  • Updated

Scenario

You are creating your signature in Exclaimer and are using fonts that may not be web safe. You want to find a way to make sure that your text will still be visible to recipients of your signature even if they do not have the font you are using installed.

Alternatively, you are using custom fonts but do not want the signature to render as a bitmap.

Resolution

A web safe font is a font that is installed across all operating systems. If your chosen font is not installed on the email recipient's PC, they will not see the font as you intended when you created your signature design.

To avoid this, you can create a font stack, which is a list of specified fonts to display as alternative 'fallback' options, known as fallback fonts. This allows you to control how the signature appears across all devices. If the recipient does not have a font installed, the next option in the list of fallback fonts will display.

To view a list of web safe fonts, see Is your chosen font web safe and available for use?

TIP! When using custom fonts, signatures are displayed as bitmaps to ensure that text is preserved, as custom fonts are not web safe. You can use font stacks to avoid signatures rendering as bitmaps. If using uploaded custom fonts, you must remove them as you cannot use a font stack if an uploaded custom font is present. For more information on custom fonts, see the difference between custom fonts and font stacks.

Inserting a Font Stack

  1. Open your signature template within the Signature Designer.
     
  2. Select everything on the signature canvas by selecting the outer border of the template.


    A signature with all elements selected, shown by the highlighted outer border.
     
  3. In the Properties pane, expand the Text section.
     
  4. Under Font Family, select Manage.
     

  5. Remove any existing fonts by select the X icon next to each font.

    NOTE: This also removes uploaded custom fonts, but custom fonts can still be used as the first font in a font stack.
  6. Select OK, then YES.
     

  7. In the Font Family entry field, enter a list of fonts to use as fallback fonts, each separated by a space and comma. You can use any number of fonts. For example:

    Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif

    This is your font stack.


    The Text Properties. Enter your font stack in the Font Family text box.

    NOTES: If you are unsure which fonts to use, look at the CSS Font Stack for a list of fonts that already have font stacks created.
    Always end the string with a generic font family name to ensure there is always a fallback option, as generic families can be shown on all devices. The following are examples of generic font families and their styles: 

    Serif - uses serifs on letters. Examples include Times New Roman and Georgia. 
    Sans-Serif - does not use serifs on letters. Examples include Arial and Helvetica. 
    Monospace - all letters and characters are the same width. Examples include Lucida Console and Courier New. 
    Cursive - designed to simulate handwritten lettering. Examples include Brush Script MT and Lucida Handwriting. 
    Fantasy - decorative styles. Examples include Papyrus and Impact. 

  8. In the unsaved changes banner, select Save.

    CAUTION! When using Client-Side on Classic Outlook, Outlook will use the first font in a font stack and remove the remaining fonts in the stack from the HTML coding. 
    If using Classic Outlook, we recommend you use font stacks for Server-Side signatures only. New Outlook is not affected by this behaviour.