Font Styling in On Premise Solutions

Related Products: Signature Manager Exchange Edition | Signature Manager Outlook Edition | Template Editor

Scenario

Your signature design requires specific font sizes and styling in order to match your company's brand guidelines.

Resolution

The editor allows you to customise the text and fields you include using the properties available in the Template editor.

You can also add font styles to Conditional fields for the conditional values to inherit.

You can install your own custom fonts, as well as use the Source Code in the HTML editor to add additional styles to further customise the signature.

Any websafe font can be used, such as Arial, Times New Roman, Courier etc. Please refer to our Web Safe Fonts article for further information.

This article describes:

Adding font styles to Active Directory Fields
          Adding font styles to the Prefix and Suffix
          Adding font styles to custom hyperlinks
          Adding font styles to Composite Fields
Adding Font styles to Conditional Fields
Using the Font styles in the Editor Window
Adding font styles within the Source Code
        Using the Source Code
        Using the Style Editor

Adding font styles to Active Directory Fields

To add a field, use the Fields drop-down to select a field.

The Message Sender consists of all the fields from the Active Directory.

When working with fields, such as the {Display Name}, {Telephone Number}, {Email Address}, {Custom Hyperlink} and so on, it is recommended to use the field Properties on the right-hand side of the Template Editor to set the fonts and colours, based on the design required.

The Appearance section allows you to select and/or type a font name, as well as set the size in pts. Setting colours is always in a hex value, but you can type in colour names, such as 'aqua', 'Red', 'green' and so on. Bold, underline and small caps are also possible. However, if you need a specific field case, you can change it.

The Behavior section allows you to show and hide a field if it is blank in the Active Directory - this also affects the Prefix and Suffix as well.

The Content section allows you to add a prefix and suffix, as well as suppress lines and add a fallback value, although suppressing lines and fallback values are not commonly used.

Adding font styles to the Prefix and Suffix

The Prefix and Suffix of the field display text either before or after the Field Data. They are used specifically for contact details, along with faux smart tables and avoiding blank spaces if a field is empty.

Prefix - Before the Field Data

Suffix - After the Field Data

Typically, the prefix and suffix inherit field values as set in the Appearance section. However, you can change the properties.

Adding font styles to custom hyperlinks

Custom Hyperlinks, {Email (as Hyperlink)} and {web page (as hyperlink} fields always show as blue and underlined as per the default mail client behaviour. You can override this using the field properties.

Turning the underline setting to false and adding colour to the field itself will allow the hyperlink to remain a set colour in all mail clients. This will not be displayed with an underline. However, you can choose to leave the hyperlinks to remain blue and underlined if need be.

Changing the case for the hyperlinks can be achieved as per our changing the field cases in custom hyperlinks guide.

Adding font styles to Composite Fields

To add a composite field:

1. Click Fields, then click Dynamic Content and select Composite Field:
   
   
   
   The Appearance properties of the composite field are the same settings as a normal Field. However, you cannot set the field case, nor add a prefix or suffix.
   
   You can interpret the markup if there is HTML code inside the field, this will allow the code to display as intended, rather than displayed as HTML code.
   
   
   
   You can have fields within the composite field that have different properties to the rest of the content.
   
   To do this,

• Double-click on the composite field and add in the field or another composite field as required.
  
  
  
  
• Highlight or click on the field in the window and apply the styling in the Properties:
  
  

Adding Font styles to Conditional Fields

To add a conditional field:

1. Click Fields, then click Advanced and select Conditional Field.
   
   
   Note: For further information on using conditional fields, see On Premise - Using Conditional Fields.
   
   
   
   
2. Styling Conditional fields is exactly the same as a composite field. However, you can also style the fields inside a condition to have different properties.
   
   
   
   
3. To change the properties of a field inside a condition, double-click on the conditional field in the template, then click on the condition you wish to edit and click Edit.
   
   
4. Right-click on the purple field: select properties to bring out an editing window.
   
   
   
   
5. Here you can edit the field properties the same way as before.
   
   

Using the Font styles in the Editor Window

You can use the font properties at the top of the editor window. However, this is limited and will generate HTML in the source code that can be difficult to navigate through.

Font tags are generated when using the text Properties, rather than X-Small, X-Large and so on. It will display Font Size = 6 or a generated number, followed by Face="font".

Font sizes have their own equivalents, for further information in regards to what X-small, X-Large etc. are, please see our conversion guide for a comparison between pts, pixels and x-small / large sizes.

Adding font styles within the Source Code

The source code allows you to add custom fonts using a Font Stack, as well as set other font properties such as font weights, letter spacing, line heights etc. This can be generated in two ways, either by using the Style Editor in the font style properties tag in the field or inserting HTML code directly.

Using the Source Code

In this example, we use span tags to style 'Kind Regards', using a font family, line height, font size and colour. Span tags allow you to style the signature as a whole or target individual elements. This can help to resolve font issues with some mail clients, extra line breaks appearing after being sent from mobile devices and of course, using custom fonts by using a font stack.

To add a span tag:

1. Click HTML then select Source.
   
   
   
   
2. Select the area where you would like to apply <Span></Span>, along with style =, similar to the below example:
   
   
   
   This can surround one section or the whole of the template. This depends if the whole signature needs to be one font, or if you need to style this based on multiple values.
   
   
   <span style="font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif; font-size:10pt; line-height:12pt; color:#00bbee;"> Kind regards,</span>
   
   The outcome should reflect the code added;  in this case 'Calibri', 10pts and Blue. As per the font stack, the font will change depending on the device, mail client and the fonts that are available.
   
   

Using the Style Editor

The Style Editor allows you to specify inline style information to be included in an HTML tag by using the tag Properties.

1. Place the cursor within the text that you want to specify the size of. You will see at the bottom and on the right-hand side of the Template Editor window the list of tags that the cursor is within.
   
   
   
   
2. When the text is selected, navigate to the Style property in the Properties pane on the right-hand side. Then click on the ellipsis '…' to open the style editor:
   
   
   
   
3. Here you can set the font styles, font weights, colours and other styles as required:
   
   
   
   As you can see, the HTML code is generated automatically inline. If we go to the source code, we can see that this is generated using Style= and this can be applied to a <p> </P>, <font></font> and <span></span> tags to name a few.
   
   
   
   This sort of styling can also be used in Tables, Table Cells, Div Tags and so on.
   
   Note: Source code cannot be used in the Rich Text and Plain Text versions of the signature template