How do you globally change all e-mail notifications to use a different font (no longer Times New Roman)?

[jhill1]

Hello all,

<font size="2" face=Helvetica>

at the beginning of the message body for every template did not work. Is there somewhere else this should be put?

Or is it different depending on how the message is generated (HTML vs script vs Rich Text Editor)

Also, selecting the text in the Rich Text Editor and updating also did not work.

Is there a Global way to change this?

Thanks in advance,

J Hill

[Chuck Tomasi]

This may be helpful.

System Setting for Default Font

[jhill1]

Hello Chuck,

Thank you for the link.

It is helpful, however, the solution is quite messy and still does not capture everything. Am I correct in saying that it would require modification to every single e-mail notification template and script, both JavaScript and HTML? Simply changing the default font would become a project and major change in-and-of-itself, going through every notification and scripting the font.

Is that the case?

Thanks,

J Hill

[Chuck Tomasi · Accepted solution]

Hi,

Yes, it sounds like you need to update each one. If you are going to do that, then make it a generic header that you can modify once this time around and then in the future you can make updates in a single place and they all get updated.

This should help: TechNow Episode 11 | Mail Headers

[JayGervais]

Hi there, 

I was having these same issues with changing the font and styles for email notifications. In the above comment, @Chuck Tomasi suggests creating a generic header and manually adding each one into the email scripts. For anyone wanting to avoid a tedious task, I managed to create a background script to insert header and footer template scripts above and below the notification message.

Your styling may be different, but here are my header and footer scripts.

'email_header'

(function runMailScript(/* GlideRecord */ current, /* TemplatePrinter */ template,
          /* Optional EmailOutbound */ email, /* Optional GlideRecord */ email_action,
          /* Optional GlideRecord */ event) {

          // email header
	template.print("<div>");
	template.print("<table id='backgroundTable' style='font-family: Calibri; font-size: 17px; line-height: 100%; color: #424e5b; background: #F9F9F9; width: 100%; margin: 0; padding: 0; border-collapse: collapse; mso-table-lspace: 0;' border='0' width='100%' cellpadding='0'>");
	template.print("<tbody><tr>");
	template.print("<td style='border-collapse: collapse;' valign='top'><p>&nbsp;</p>");
	template.print("<div class='full-width' style='max-width: 600px; margin: 0 auto;'>");
	template.print("<div class='card' style='background: #FFF; border-radius: 0.5rem; padding: 2rem; margin-bottom: 1rem;'>");

})(current, template, email, email_action, event);

'email_footer'

(function runMailScript(/* GlideRecord */ current, /* TemplatePrinter */ template,
          /* Optional EmailOutbound */ email, /* Optional GlideRecord */ email_action,
          /* Optional GlideRecord */ event) {

          // email footer
	template.print("</div></div>");
	template.print("</td></tr>");
	template.print("</tbody></table>");
	template.print("</div><p>&nbsp;</p>");

})(current, template, email, email_action, event);

This is the background script I use to insert the template scripts. I perform checks to make sure the notification message is not empty and does not already contain styling information. These checks may differ with your own system. I also check for the ServiceNow header logo and replace it with our own. 

var gr = new GlideRecord("sysevent_email_action");
gr.query();

while (gr.next()) {
  if (gr.message_html != '') {
    if(!gr.message_html.includes('<style type="text/css">')
       && !gr.message_html.includes('table id="backgroundTable"')
       && gr.message_html != '' && !gr.message_html.includes('mail_script:incident_body_header')
       && gr.collection != 'asmt_assessment_instance') {
      var html_top = "${mail_script:email_header}";
      var html_bottom = "${mail_script:email_footer}";
      gr.message_html = html_top += gr.message_html + html_bottom;
    }
    if (gr.message_html.includes('/sn-logo-dark-green-email.pngx')) {
  		gr.message_html.replace('/sn-logo-dark-green-email.pngx', '/ASK_transparent.pngx');
  	}
	}
	gr.update();
}

Hopefully this can help someone out.

Cheers!